CSS3-变换

2D变换-位移

transform属性可以实现CSS3的所有变换操作

位移是通过其属性值translateX() 和translateY()来实现‘

• 位移与相对定位很相似，都不脱离文档流，也不会影响到其他元素
• 相对定位的百分比值是参考父元素做定位，而位移的百分比值是参考自身位移
• 位移对行内元素无效
• 位移配合定位可以实现元素水平居中

.box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50% , -50%);
}

---

2D变换-缩放

缩放通过属性值scaleX()和scaleY()来实现

这里的值没有单位，0为缩放至没有元素，但这个值可以为负数，-1则为翻转

我们可以通过缩放来调整文字大小小于浏览器默认大小

---

2D变换-旋转

旋转通过属性值rotateZ()来实现

这里的值的单位是deg，直接给一个角度即可

---

2D变换-扭曲

扭曲通过属性值skewX()和skewY()来实现

这里的值的单位是deg，直接给一个角度即可

---

多重变换

因为所有变换都是通过一个transform属性其中的属性值来调整的，所以在进行多重变换时，我们应该将多条属性值写在同一个transform属性中

应该注意所有变换的顺序，其中，旋转应该放在所有变换的最后

---

变换原点

• 通过transform-origin属性可以设置变换的原点

• 修改变换原点对位移没有影响，对旋转和缩放会产生影响

• 如果提供两个值，第一个值应用横坐标，第二个值应用纵坐标

• 如果只提供一个，若是像素值，表示横坐标，纵坐标取50%，若是关键词，则另一个坐标取50%

---

3D空间与景深

• 元素如果要进行3D变换的首要操作，就是将其父元素使用transform-style属性开启3D空间
  • flat：2D空间，默认值
  • preserve-3D：让子元素位于此元素内的三维空间里
• 景深指的是观察者与z=0平面的距离，能让3D变换的元素产生透视效果，看起来更加立体，使用perspective属性设置景深
  • none：不指定透视，默认值
  • 长度值：指定观察者距离z=0平面的距离，不允许负值

---

透视点位置

通过perspective-origin属性来调整透视点的位置

通常情况下，我们不需要调整透视点的位置

---

3D变换-位移

通过translateZ()和translate3D()实现3D变换的位移

---

3D变换-旋转

• rotateX：设置x轴旋转角度，需要指定一个角度值（deg），面对x轴正方向，正值顺时针，负值逆时针
• rotateY：设置y轴旋转角度，需要指定一个角度值（deg），面对y轴正方向，正值顺时针，负值逆时针
• rotate3D：四个值，最后一个值为角度，前三个值为是否要在（X，Y，Z）轴上进行选装

---

3D变换-缩放

• scaleZ：设置z轴方向的缩放比例，值为一个数字
• scale3d：第一个参数对应x轴，第二个参数对应y轴，第三个参数对应z轴，参数不允许省略

---