CSS3-变换 transform

2 变换 transform

2.1 变换相关 CSS 属性

CSS 属性名	含义	值
transform	设置变换方法	各种2D或3D的变化方法
transform-origin	设置变换原点 对于2D和3D变换都有效果	使用关键字或者长度表示的坐标位置
transform-style	设置子元素在平面空间还是3D空间	flat： 子元素在平面空间。 perserve-3d： 子元素在3D空间。
perspective	设置景深，需要设置给变换元素的父元素	长度
perspective-origin	设置观察者位置，用于3D变换	使用关键字或者长度表示的坐标位置
backface-visibility	设置3D变换的元素背面面向用户时是否可见。 设置给变换的元素	visible： 可见，默认值。 hidden： 隐藏。

关于设置变换效果的注意事项：

1. 可以给一个元素设置多个变换效果，transform 属性指定多个变换方法即可，用空格隔开。
2. 行内元素设置变换效果不会生效。

关于设置3D变换的注意事项：

1. 3D变换效果生效的前提：必须给变换元素的父元素设置 transform-style:preserve-3d; 和 perspective 两个属性
2. perspective 表示景深，透视距离（观察者与平面的距离），该值对3D效果影响很大。
3. transform-style、perspective、perspective-origin 需要设置给父元素； transform、transform-orogin、backface-visibility 需要设置给变换的元素本身。

2.2 2D 变换的方法

① 位移 translate 方法

translateX()	水平方向位移
translateY()	垂直方向位置
translate()	    同时设置垂直和水平方向位移

总结：

1. 指定长度作为位移的距离，正值向右向下位移；负值向左向上位置。
2. 用百分比作为位移长度，水平位置参照元素自身的宽度，垂直方向位置参照元素自身高度。
3. translate() 如果只指定一个值，认为只设置水平位置，没有设置垂直方向位置。

② 缩放 scale 方法

scaleX()	水平方向缩放
scaleY()    垂直方向缩放
scale()		同时设置水平方向和垂直方向的缩放

总结：

1. 指定数字作为缩放方法的值，没有单位，表示缩放的倍数（比例）。
2. scale() 如果两个值就是分别设置水平和垂直缩放，如果只有一个值表示同时设置两个方向的缩放。

③ 旋转 rotate 方法

rotate()	设置旋转的角度

总结： 指定角度作为 rotate 的值，角度的单位是 deg。

2.3 3D 变换的方法

① 3D 位移

translateZ()
translate3D()

② 3D 缩放

scaleZ()
scale3D()

③ 3D 旋转

rotateX()	沿着x轴旋转
rotateY()	沿着y轴旋转
rotateZ()	沿着z轴旋转，等同于 rotate()
rotate3D()	同时设置三个轴的旋转角度

 transform: rotate3D(1, 1, 1, 30deg);