css3入门(7)变形

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)；