网易云课堂前端学习-css-变形-transform

变形包括2d变形和3d变形

---

transform2D变形

transform(none|+)，可以写多个方法一起

但是要注意各个动作的先后顺序，因为变形时会变动元素的X、Y轴。

rotate旋转

rotate:

none为默认值，无旋转

angle值为角度角度值，顺时针为正，逆时针为负

例：transform:rotate(30deg);，意为以中心点为基准旋转30度（基准可以变动）。x、y轴在左上角，坐标0，0

---

translate移动

translate( []?)

等价于

translateX()

translateY()

可以是百分比，也可以是绝对值可以是负值

例：transform:translate(50% 50%);，意为向右移动50%，向下移动50%。

---

scale缩放

scale([,number>]?)意为可以有2个值，以逗号分隔，相等则可省

等价于

scaleX()

scaleY()

例：transform:scale(1 , 1.2);，意为以中心点为基准，在X轴放大1倍（不变），在Y轴放大1.2倍。

---

skew倾斜（压扁或拉伸）

skew([,]?)，若第二个轴缺省时为默认值0deg

等价于

skewX()Y轴向X轴的正方向倾斜（正值时）

skewY()X轴向Y轴的正方向倾斜（正值时）

变动的是物体的X、Y轴

例：transform:skew(30deg 15deg);，意为以中心点为基准y轴向x轴正方向倾斜30度，y轴向x轴正方向倾斜15度。

---

transform-origin改变动作基点（较多用于旋转）

transform-origin:

[left|center|right|top|bottom||]

|[left|center|right||][top|center|bottom||]?

|[center|[left|right]]&&[center|[top|bottom]]?

可以是三组值中的任意一组：

第一组是指关键字

第二组是分别设置X、Y、Z三个轴（Z轴只有长度）

第三组是分别设置X、Y、Z三个轴上的关键字

例：transform-origin:50% 50%;，意为以x轴的50%、y轴的50%位置进行旋转。当值缺省时为默认值50%

---

perspective透视

perspective:none|;，none为默认值，无透视效果，默认以中心点为基准，长度为离开基准的距离，值越大透视效果越不明显

perspective-origin，改变基准，与transform-origin一样

translate3d()3d移动

比translate多一个z轴参数，值为数值，正值靠近，负值远离（在视觉效果上近大远小）。

---

scale3d()3d缩放

与其他动作结合时注意先后顺序，先缩放的话有倍率效果

---

rotate3d()3d旋转

rotate3d(,,,);

前三个值用三维坐标选取旋转点，以该点与坐标原点的连线作为旋转轴进行旋转

---

元素变形嵌套

还需要增加设置是否扁平化，因为元素设置了3d变形后默认设置其内部元素进行了扁平化，取消了3d变形

transform-style:flat|preserve-3d;

flat为默认值，扁平化

preserve-3d为保留3d空间

---

元素反转后背面是否可见的设定

backface-visibility:visible|hidden;

为3d元素的背面是否可见的设定，默认为可见的

用于元素旋转组合之后的单个显示的设定