Css 2D转换

开发工具与关键技术：DW

撰写时间：2021/7/28

transform属性可以对元素进行移动、缩放、转动、拉长或拉伸。

Transform属性有四个常用方法：rotate(x,y)旋转，scale(x,y)缩放，translate(x,y)移动（平移）和skew(x-angle,y-angle)倾斜

1 translate()从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。

示例：

2 rotate()方法根据给定的角度顺时针或逆时针旋转元素

示例：

3 scale()方法增加或减少元素的大小（缩放）（根据给定的宽度和高度参数）。

示例：

4 skewX()方法使元素沿 X 轴倾斜给定角度。skewY()方法使元素沿 Y 轴倾斜给定角度。

示例：

2D 所有转换方法总结：

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

这是我所学到的内容，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！