HTML中如何使用 CSS 實現元素 2D 轉換

CSS3 2D 轉換是指定義元素平面上的變換，主要表現爲旋轉，平移，縮放等效果。

CSS3 transform

CSS3 中通過設置元素的 transform 屬性值來實現元素的不同2D轉換。

瀏覽器支持

表格中的數字指表示支持該屬性的瀏覽器首個版本。

屬性	Chrome	IE	Firefox	Safari	Opera
transform	36.0	10.0	16.0	9.0	23.0

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轉換的示例。