2D位移与旋转

2D:平面空间的元素变形。由X,Y轴决定。

变形属性：

​ transform（属性）:值

transform的属性值为功能函数。

2D的功能函数：

​ 2d的位移

​ 2D的旋转

​ 2d的缩放

​ 2d的倾斜

2D位移：

​ transform:translate(x,y);

​ transform:translateX(x轴移动的距离);

​ transform:translateY(Y轴移动的距离);

2D的缩放：

​ transform:scale(x,y);

​ transform:scaleX();

​ transform:scaleY();

（x ， y 这两个参数为一个数字，大于1放大 小于1缩小）

2D的旋转：

transform:rotate(30deg)(度数—度数单位deg);

transform:rotateX(30deg);

transform:rotateY(30deg);

2D的倾斜：

指定x,y的倾斜

transform:skew(度数);

transform:skewX(度数)

transform:skewY(度数)

改变变形原点：

transform-origin:x y;

属性值：

​ left top

​ 10px 20px

​ 10% 20%

​ center

注：多个功能函数共同使用的情况下，尽量先写位移 后写 其他的功能函数。

目标伪类选择器：

​ 元素选择符:target{

​ //当该元素被相关URL指向的时候，做样式的变换。

平面空间：transform-style:flat

transform-style:preserve-3D

形成3d空间(让父元素形成3d空间、3d舞台)：由X,Y，Z轴决定。

3D的功能函数：

​ 3d-位移

​ 3d-缩放

​ 3d-旋转

3d位移：

​ transform:translate3d(x,y,z);

​ transform:translateZ();