2D动态小记

变形属性：transform

transform翻译成汉语具有"变换"或者"改变"的意思。

通过此属性具有非常强大的功能，比如可以实现元素的位移、拉伸或者旋转等效果

最能体现transform 属性强大实力的是实现元素的3D变换效果

2D

2D变换，是在一个平面对元素进行的操作。

可以对元素进行水平或者垂直位移、旋转或者拉伸

变形属性：transform的所有属性值

1、transform：none;默认值

2、transform：translate（）；移动  平移  单位是px

transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的

                    transform ：translate(200px)；默认是按照X轴移动

                    transform ：translateX(200px)；根据X轴给定的参数，从当前元素位置移动

                    transform ：translateY(200px)；根据Y轴给定的参数，从当前元素位置移动

                    transform ：translate(10px,20px)；定义 2D 平移移动。

                    transform ：translateX(200px)   translateY(200px) ；

3、transform：rotate（）；旋转  单位是deg   deg度数

                    transform ：rotate(30deg)；旋转 单位deg  默认是Z轴旋转

                    transform ：rotate(30deg)；默认是按照Z轴旋转。

                    transform ：rotateX(30deg)；根据X轴给定的参数，从当前元素位置旋转。

                    transform ：rotateY(30deg)；根据Y轴给定的参数，从当前元素位置旋转。

                    transform ：rotateX(30deg)   rotateY(30deg)  ；

4、transform：scale（）；缩放  没有单位  默认值是1

                    transform ：scale(2)；X和Y同时缩放 默认值是1

                    transform ：scale(2)；默认是X和Y同时缩放。

                    transform ：scaleX(2)；通过设置 X 轴的值来定义缩放转换

                    transform ：scaleY(3)；通过设置 Y 轴的值来定义缩放转换。

                    transform ：scale(2,5)；定义 2D 缩放。

                    transform ：scaleX(2)   scaleY(3) ；

该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数，可以取负 值。只不过取负值时，会先让元素进行翻转（顺时针180deg），然后在进行缩放

5、transform：skew（）；倾斜   单位是deg

                    transform:skew(30deg)；默认是X轴倾斜。

                    transform ：skewX(30deg)；通过设置 X 轴的值来定义倾斜转换

                    transform ：skewY(30deg)；通过设置 Y 轴的值来定义倾斜转换

                    transform ：skew(30deg,130deg)；定义 2D 倾斜

                    transform ：skewX(30deg)  skewY(130deg)  ；