逆战班提升——2D与3D属性总结
一、 过渡属性
1. transition-property：检索或设置对象中的参与过渡的属性
- 属性值：属性名/all
- 例：transition-property:height;
2. transition-duration：检索或设置对象过渡的持续时间
- 属性值：时间
- 例：transition-duration:1s;
3. transition-delay：检索或设置对象延迟过渡的时间
- 属性值：时间
- 例：transition-delay:1s;
4. transition-timing-function：检索或设置对象中过渡的动画类型
- 属性值：linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier()
- 例：transition-timing-function:linear;
5. transition：以上属性的复合式写法
- 例：transition:all 2s 1s linear;
- 先写过渡时间，后写延迟时间，其他属性值无特定顺序
二、2D/3D变换属性
- transform：实现元素位移、旋转、缩放、倾斜效果
-- 其属性值需要使用相应的功能函数
三、 设置空间类型属性
- transform-style：设置空间为2D或3D
-- 属性值： flat/preserve-3d
-- 例：transform-style:preserve-3d;
四、2D/3D功能函数
1. translate()：位移
- translate(tx)：水平方向的位移
- translate(tx,ty)：第一个值代表水平方向的位移，第二个值代表垂直方向的位移
- translateX(tx)：指定X轴方向设置位移
- translateY(ty)：指定Y轴方向设置位移
- translate3d(x,y,z)：第一个值代表水平方向的距离，第二个值代表垂直方向的距离，第三个值代表Z轴方向，3D的内容
- translateZ(tz)：指定Z轴方向设置位移，3D的内容
2. scale()：缩放
- scale(值1)：水平和垂直方向都放大或缩小
- scale(值1，值2)：值1——水平方向，值2——垂直方向
- scaleX(值)：水平方向放大缩小比例
- scaleY(值)：垂直方向放大缩小比例
- scaleZ(值)：Z轴反向的放大缩小比例，3D的内容
- scale3d(x,y,z)：值1——X轴，值2——Y轴，值3——Z轴，3D的内容
3. rotate()：旋转
- rotate()：沿中心点旋转
- rotateX()：沿X轴旋转
- rotateY()：沿Y轴旋转
- rotateZ()：沿Z轴旋转，3D的内容
- rotate3d(x,y,z,a):值1——X轴，值2——Y轴，值3——Z轴，a——旋转的角度，3D的内容
4. skew()：倾斜
- skew(值1)：一个属性值时代表沿X轴倾斜，即沿水平方向倾斜
- skew(值1,值2)：值1——沿X轴倾斜，值2——沿Y轴倾斜
- skewX()：沿X轴倾斜
- skewY()：沿Y轴倾斜，3D的内容
五、 原点设置属性
- transform-origin：设置元素围绕着哪个点变形或旋转
-- transform-origin:值1 值2 值3;（值1为水平方向，值2为垂直方向，值3为Z轴方向，若为2D空间值3不写）
-- 例：transform-origin:50% 50% 0;
六、 隐藏属性
- backface-visibility：隐藏被旋转的div元素的背面
-- 属性值：visible/hidden
-- 例：backface-visibility:hidden;
七、 景深属性（3D）
- perspective：设置景深效果
-- 属性值：以px为单位的数值
-- 例：perspective:1200px;
