2D转换 动画效果

2D转换

可以对元素进行水平或者垂直位移、旋转或者拉伸。
确定坐标系
默认状态下，x轴是水平的，向右为正。
默认状态下，y轴是垂直的，向下为正。
----------------------------------------------------------------------------------------
变形属性：transform
属性值：
transform：none;默认值
transform：translate（）；移动 平移 单位是px
transform：rotate（）；旋转 单位是deg deg度数
transform：scale（）；缩放 没有单位 默认值是1
transform：skew（）；倾斜 单位是deg
transform：matrix（）；矩阵
transform：perspective（）；景深 视距 单位是px
-----------------------------------------------------------------------------------------
平移属性
transform ：none； 说明：定义不进行转换。
transform ：translate(200px)；平移，默认是X轴移动，可以单位是%，这个%是自己的，不是父元素的
transform ：translate(200px)； 默认是按照X轴移动
transform ：translateX(200px)； 根据X轴给定的参数，从当前元素位置移动。
transform ：translateY(200px)； 根据Y轴给定的参数，从当前元素位置移动。
transform ：translate(10px,20px)； 定义 2D 平移移动。
--------------------------------------------------------------------------------------------------
旋转属性
transform ：rotate(30deg)； 默认是按照Z轴旋转。
transform ：rotateX(30deg)；根据X轴给定的参数，从当前元素位置旋转。
transform ：rotateY(30deg)； 根据Y轴给定的参数，从当前元素位置旋转。
-----------------------------------------------------------------------------------------------------------
缩放属性
transform ：scale(0.2)； 默认是X和Y同时缩放。
ransform ：scaleX(2)； 通过设置 X 轴的值来定义缩放转换
transform ：scaleY(3)； 通过设置 Y 轴的值来定义缩放转换。
transform ：scale(2,5)； 定义 2D 缩放。
transform ：scaleX(2) scaleY(3) ；该元素增加或减少的大小，
取决于宽度（X轴）和高度（Y轴）的参数，可以取负值。
只不过取负值时，会先让元素进行翻转（顺时针180deg），
然后在进行缩放。
-------------------------------------------------------------------------------------------------------
倾斜属性
transform ：skew(30deg)； 默认是X轴倾斜。
transform ：skewX(30deg)；通过设置 X 轴的值来定义倾斜转换
transform ：skewY(30deg)；通过设置 Y 轴的值来定义倾斜转换
transform ：skew(30deg,130deg)； 定义 2D 倾斜
-----------------------------------------------------------------------------------------------------

改变元素焦点位置

transform-origin改变元素基点的位置 属性值可加left right.....
主要作用：让我们在进行transform动作之前可以改变元素的基点位置。
1.transform-origin(X,Y):用来设置元素的运动的基点（参照点）。
2.transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。
————————————————----------------------------------------------------------
版权声明：本文为CSDN博主「执念MJ」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/AMD23/article/details/119257572