整体介绍

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旋转、空间移动到自己的位置的