CSS2D与3D变换

2D变形

旋转变形

• 将transform属性设置为rotate()即可实现旋转变形

• 若角度为正，则顺时针方向旋转，否则逆时针方向旋转
• 可以使用 transform-origin 自定义变换原点

缩放变形

• 将transform属性的值设置为scale(),即可实现缩放变形

• 当数值小于1时，表示缩小元素；大于1表示放大元素

斜切变形

• 将transform属性的值设置为skew()，即可实现斜切变形

位移变形

• 将transform属性的值设置为translate()，即可实现位移变形
• 
• 和相对定位非常像，位移变形也会“老家留坑”，“形影分离”

3D旋转

• 将transform属性的值设置为rotateX()或者rotateY()即可实现绕横轴、纵轴旋转

空间移动

• 当元素进行3D旋转后，即可 继续添加translateX()、translateY()、translateZ()属性 让元素在空间进行移动
• 一定记住，空间移动要添加在3D旋转之后