整体介绍
2D变形 1)旋转变形 2)缩放变形 3)斜切变形 4)位移变形
3D变形 1)3D旋转 2)空间移动
旋转变形
将transform属性的值设置为rotate(),即可实现旋转变形
若角度为正,则顺时针方向旋转,否则逆时针方向旋转
transform-origin属性
可以使用transform-origin属性设置自己的自定义变换原点
transform-origin : 0 0 以左上角为中心点进行旋转
缩放变形
将transform属性的值设置为scale(),即可实现缩放变形
当数值小于1时,表示缩小元素;大于1表示放大元素
斜切变形
将transform属性的值设置为skew(),即可实现斜切变形
位移变形
将transform属性的值设置为translate(),即可实现位移变形
和相对定位非常像,位移变形也会“老家留坑”,“形影分离”
3D旋转
将transform属性的值设置为rotateX()或者rotateY(),即可实现绕横轴、纵轴旋转
perspective属性
perspective属性用来定义透视强度,可以理解为“人眼到 舞台的距离”,单位是px
空间移动
当元素进行3D旋转后,即可继续添加translateX()、translateY()、translateZ()属性让元素在空间进行移动
注:一定记住,空间移动要添加在3D旋转之后
制作一个正方形
正方体的每个面都是从舞台经过不同的3D旋转、空间移动到自己的位置的