CSS中的變形屬性

CSS中的變形屬性可以讓元素沿著水平或垂直方向旋轉、縮小、放大、傾斜等等。下面我們來詳細介紹一下CSS中的變形屬性：

transform-origin

transform-origin: x-axis y-axis z-axis;

用于設置變形的起點位置，默認值是元素中心點。x軸和y軸的取值范圍是0~100%。如果有z軸值，一般設置為正值，表示離屏幕更近。

transform

transform: none|transform-functions;

用于定義變形方式，none表示元素不變形。transform-functions包括以下幾種：

• rotate- 旋轉元素。

transform: rotate(30deg); /* 按照中心點順時針旋轉30度 */

• scale- 放大或縮小元素。

transform: scale(2, 2); /* 水平方向放大2倍，垂直方向放大2倍 */

• skew- 傾斜元素。

transform: skew(20deg, 0); /* 向右傾斜20度 */

• translate- 移動元素。

transform: translate(50px, 100px); /* 向右移動50px，向下移動100px */

• matrix- 自定義變形。

transform: matrix(1, 0, 0, 1, 50, 100); /* 向右移動50px，向下移動100px */

以上就是CSS中的變形屬性，它們可以讓我們的頁面呈現更加生動、有趣的效果。如果需要深入了解，可以參考CSS3規范。