变形2D（transform）

1.变形属性transform：

•  变形不会影响到⻚⾯的布局
• 尽量变形写在⼀个transform⾥，不然下⾯再写⼀个，就会覆盖上⾯
• 可选值：

             位移 —translate()

             缩放 —scale()

             旋转 —rotate()

             倾斜 —skew()

1.位移 transform:translate();

             

            translate( 参数1，参数2 ) 参数 值 1 是指在 x 轴上移动的距离 , 正值，元素向右移动，负值向左                             移动，参 数2 是指在 y 轴上移动的距离，正值向下，负值向上，参数 2 默认为 0

            translateX()沿着x轴⽅向平移

            translateY()沿着y轴⽅向平移

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

       注意：

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

           2 、位移的参考原点是元素的原来所处的位置

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

           4 、 不会影响别的元素

           5 、对于⾏内元素是没有效果的

2.旋转 transform: rotate();

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

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

           3. 如果这个值为正值，则是元素对原点中⼼顺时针旋转； 反之如果这个值为负值，元素对                        原点中⼼进⾏逆时针旋转。

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

       属性值：

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

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

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

3.缩放 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 轴上缩放元素

          5. 也不会影响其他盒⼦

4.倾斜 transform:skew()

         1. 倾斜skew()是指通过设定的⻆度以其中⼼位置围绕着X轴和Y轴按照⼀定的⻆度倾斜显示。

          2. ⼀个参数时：表示x轴的倾斜x⻆度,y轴默认为0；

          3. 两个参数时：第⼀个参数表示x轴的倾斜⻆度，第⼆个参数表示y轴的倾斜⻆度。

          4. 变形的单位是deg

                   x值：为正则向左变形，为负则向右变形

                   y值：为正则向上变形，为负则向下变形

                        以上是以左上⻆为参照向左向右，向上，向下变形

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

                   transform:skewX() ；

                   transform:skewY()；

5.变形原点 transform-origin

          1. 原点就是元素的中⼼，通过 transform-origin 改变原点的位置

          2. ⽤变形原点 transform-origin属性，该属性只有在设置了transform属性的时候会起作⽤

          3. 设置偏移量值都是从元素左上⻆开始的

          4. transform-origin也有两个属性值：

              transform-origin:（⽔平⽅向 垂直⽅向），默认值 transform-origin:（center center）

             值可以为⽅向值（left、center、top、right、bottom等），也可以是以px、%为单位的数值