transform

使用 transform 控制元素的变形，包括控制移动、旋转、倾斜、3D转换等。
下面是CSS提供的变形动作。

• translateX 和 translateY 可以使用负数和百分数
• translateZ 表示纵深，只能写具体的数值
• 小技巧控制元素居中

position: absolute;
left: 50%;
top: 50%;
/* margin-left: -100px;
margin-top: -100px; */
transform: translate(-50%, -50%);
width: 300px;
height: 300px;

• rotate3d 按向量值控制旋转
• transform 的参数叠加与顺序对变形有不同的结果 参数不会叠加，只会发生覆盖顺序的不同，结果呈现也不同

transform-origin

变形参考点，设置元素的 X/YZ 操作的基点，用于控制旋转、倾斜等操作

• 旋转默认以元素中心进行旋转，改变基点后可控制旋转点位置
• 元素移动不受变形基点所影响

属性值为：top、bottom、left、right、center 或者是 百分数 | 具体数值
默认值: center center

transform-origin: left center 300px;

perspective

控制元素的透视深度

• perspective(900px) 作为函数规则控制单个元素，每个元素的透视效果是一样的
• perspective: 900px 作为规则用于将父级整个做为透视元素，会造成里面的每个子元素的透视是不一样的。就像现实中摆一排杯子，是使用统一透视的，每个杯子的透视不一样，造成有大有小

推荐设置作为函数设置，规避透视造成元素大小不一致：transform: perspective(600px);

preserve-3d

三维空间视角，对元素设置 Z轴 效果时需要呈现三维空间效果

transform-style: preserve-3d;

perspective-origin

控制视线的角度，就像我们眼睛看物体时的聚焦点
需要设置 perspective 规则才能看到效果

backface-visibility

控制是否可以看到元素的背面

• 一般设置在元素上而不是父级元素上
• 需要父级元素设置 transform-style: preserve-3d

可选属性：

• visible 背面可见
• hidden 背面隐藏

一些常见的案例

立体按钮

3D 视图切换

背面卡片

输入框特效

贺卡效果

按钮效果

立方体翻转