CSS3-2D与3D转换

Lán2022年10月30日

大约 1 分钟

将transform属性的值设置为skew(),即可实现斜切变形，transform: skew(x斜切角,y斜切角度)

transform: skew(10deg,20deg);

将transform属性的值设置为rotate(),即可实现旋转变形，transform: rotate(旋转角度)

transform: rotate(10deg);

若角度为正,则顺时针方向旋转,否则逆时针方向旋转

可以使用transform-origin属性设置自己的自定义变换原点

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

transform: scale(3);

当数值小于1时,表示缩小元素;大于1表示放大元素

将transform属性的值设置为translate(),即可实现位移变形

transform: translate(100px,200px);

和相对定位非常像,位移变形也会“老家留坑”,“形影分离”

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

transform: rotateX(30deg);
transform: rotateY(30deg);

perspective属性用来定义透视强度,可以理解为“人眼到舞台的距离”,单位是px

当元素进行3D旋转后,即可继续添加translatex()、translateY()、translateZ()属性让元素在空间进行移动

# CSS3-2D与3D转换