动画（2）

变形2D

变形的理解

变形属性transform：1.变形不会影响到⻚⾯的布局(只折腾⾃⼰)

                                  2.尽量变形写在⼀个transform⾥，不然下⾯再写⼀个，就会覆盖上⾯

可选值： 位移—translate() 缩放—scale() 旋转—rotate() 倾斜—skew()

translate(参数1，参数2)

属性值1 是指在x轴上移动的距离,正值，元素向右移动，负值向左移动，

属性 值2 是指在y轴上移动的距离，正值向下，负值向上参数2默认为0

translateX()沿着x轴⽅向平移 translateY()沿着y轴⽅向平移 translateZ()沿着z轴⽅向平移 结合视距起作⽤.不能是百分⽐数值（3d变化）

注意： 1、平移元素，可以是数字，可以是百分⽐，百分⽐是相对于⾃身计算的,x轴往右为正，y轴往下为正，反之 为负

2、位移的参考原点是元素的左上⻆

3、如果是通过active进⾏位移，执⾏完毕后会还原

4、 不会影响别的元素

5、对于⾏内元素是没有效果的 反之如果这个值为负值，元素对原点中⼼进⾏逆时针旋转。 rotateX() ，指元素围绕其 X 轴以设定的度数进⾏旋转 rotateY() ，元素围绕其 Y 轴以设定的度数进⾏旋转 rotateZ() , 元素围绕其 Y 轴以设定的度数进⾏旋转 3.1 位

 旋转 transform: rotate()

1. 默认情况下是绕着中⼼点进⾏转动的；

2. 默认的单位是deg，⽐如rotate（45deg）

3. 如果这个值为正值，则是元素对原点中⼼顺时针旋转；

反之如果这个值为负值，元素对原点中⼼进⾏逆时针旋转。

4. 可以单独对x轴y轴z轴进⾏设置：

这⾥的X/Y/Z也是是需要⼤写的。

rotateX() ，指元素围绕其 X 轴以设定的度数进⾏旋转

rotateY() ，元素围绕其 Y 轴以设定的度数进⾏旋转

rotateZ() , 元素围绕其 Y 轴以设定的度数进⾏旋转

缩放transform:scale()

1. 缩放属性是让元素根据中⼼原点对对象进⾏缩放。

2.默认值是1，这⾥的参数没有单位，1以下的任何值，使⼀个元素缩⼩，0则是消失；⽽任何⼤于1的值，会让元素 变得更⼤。

3. 缩放属性的属性值和位移属性的属性值是类似的语法，可以是⼀个值，也可以有两个属性值：

只有⼀个值的时候第⼆个值和第⼀个值是相等的； 两个值的时候，属性值1是指在x轴上缩放元素，属性值2是指在y轴上缩放元素。

4.单独对x轴y轴进⾏设置：同样这⾥的X/Y/Z也是是需要⼤写的。

transform:scaleX();元素只在x轴上缩放元素 transform:scaleY();元素只在y轴上缩放元素 transform:scaleZ(); 元素只在z轴上缩放元素

5.也不会影响其他盒⼦