HTML中如何使用 CSS 实现元素 2D 转换

CSS3 2D 转换是指定义元素平面上的变换，主要表现为旋转，平移，缩放等效果。

CSS3 transform

CSS3 中通过设置元素的 transform 属性值来实现元素的不同2D转换。

浏览器支持

表格中的数字指表示支持该属性的浏览器首个版本。

transform 属性

下面是 transform 属性值内容， 2D 转换方法如下：

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

CSS 2D 转换示例

translate() 方法

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

下面的例子把 <div> 元素从其当前位置向右移动 50 个像素，并向下移动 100 个像素：

示例

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

试一试

查看更多关于CSS3 2D转换的示例。