CSS 2D Transforms

CSS3支持transform属性。此transform属性有助于您平移，旋转，缩放和倾斜元素。

变换是用于更改形状，大小和位置的效果。

CSS3支持两种类型的转换，即2D和3D转换。

CSS 2D转换

CSS 2D变换用于将元素的结构重新转换为平移，旋转，缩放和倾斜等。

以下是2D变换方法的列表：

• 平移(x，y)：用于沿X轴和Y轴变换元素。
• translateX(n)：用于沿X轴变换元素。
• translateY(n)：用于沿Y轴变换元素。
• rotate()：用于根据角度旋转元素。
• scale(x，y)：用于更改元素的宽度和高度。
• scaleX(n)：用于更改元素的宽度。
• scaleY(n)：用于更改元素的高度。
• skewX()：指定与X轴一起的倾斜变换。
• skewY()：它指定倾斜变换以及Y轴。
• matrix()：它指定矩阵变换。

支持的浏览器

Property	Chrome	IE	Firefox	Opera	Safari
transform	36.04.0 -webkit-	10.09.0 -ms-	16.03.5 -moz-	23.0 15.0 -webkit- 12.1 10.5 -o-	9.03.2 -webkit-
transform-origin (two-value syntax)	36.0 4.0 -webkit-	10.0 9.0 -ms-	16.03.5 -moz-	9.03.2 -webkit-	23.0 15.0 -webkit- 12.110.5 -o-

translate()方法

CSS translate()方法用于根据给定的参数(即X轴和Y轴)将元素从其当前位置移动。

让我们以一个例子来翻译