在CSS3中,transform是一個非常有用的屬性。它可以讓我們對HTML元素進行更靈活的變換。
transform屬性可以實現如下變換:
transform: translate(100px, 100px); /* 平移 */ transform: scale(2, 2); /* 縮放 */ transform: rotate(45deg); /* 旋轉 */ transform: skew(30deg, 30deg); /* 傾斜 */ transform: matrix(1, 0, 0, 1, 100, 100); /* 矩陣變換 */
其中,translate可以實現平移變換,如下代碼:
.box{ transform: translate(100px, 100px); }
scale可以實現縮放變換,如下代碼:
.box{ transform: scale(2, 2); }
rotate可以實現旋轉變換,如下代碼:
.box{ transform: rotate(45deg); }
skew可以實現傾斜變換,如下代碼:
.box{ transform: skew(30deg, 30deg); }
matrix可以實現任意變換,如下代碼:
.box{ transform: matrix(1, 0, 0, 1, 100, 100); }
總之,使用transform可以讓我們實現更多更靈活的動態效果。