前端必知必会-2D变换Transform

CSS 2D 变换

CSS 2D 变换
CSS 变换允许您移动、旋转、缩放和倾斜元素。

CSS 2D 变换方法

借助 CSS 变换属性，您可以使用以下 2D 变换方法：

• translate()
• rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()

Translation() 方法

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

以下示例将

示例

div {
   
   
transform: Translation(50px, 100px);
}

rotate() 方法

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

以下示例将 <div> 元素顺时针旋转 20 度：

示例

div {
   
   
transform: rotate(20deg);
}

使用负值将逆时针旋转元素。

以下示例将 <div> 元素逆时针旋转 20 度：

示例

div {
   
   
transform: rotate