2D变形
旋转变形
- transform:rotate(45deg);
- 如果角度为正,顺时针旋转,否则逆时针旋转
- 可以通过transform-origin:0 0;来设置以哪个点为中心进行旋转
缩放变形
- transform:scale(3);
- 后面的数字没有单位,大于1表示放大的倍数,小于1表示缩小(0.5就是原来的一半)
斜切变形
- transform:skew(10deg,20deg)
- 第一个表示x的斜切角度,另一个表示y的斜切角度
位移变形
- transform:translate(100px,200px)
- 第一个表示向右移动,另一个向下
- 和相对定位差不多也是老家留坑
3D变形
3D旋转
- 将transform属性的值设为rotateX()或者rotateY(),即可实现绕横轴旋转。纵轴旋转
- transform:rotateX(30deg);transform:rotateY(30deg);
- 也可以同时绕x和y一起旋转,中间用空格隔开
perspective属性
- 这个属性定义透视强度,可以理解为“人眼到舞台的距离”,单位是px
空间移动
- 当元素进行3d旋转之后,就可以继续添加translateX(),translateY(),translateZ()让元素在控件进行移动
- 一定要记住是在旋转之后再空间移动
- transform:rotateX(30edg) translateY(40edg) translateZ(50edg);