CSS中的轉(zhuǎn)換大致分為兩類,一類是基本轉(zhuǎn)換,包括旋轉(zhuǎn)、縮放、變形、位移等,可以通過transform屬性來實(shí)現(xiàn);另一類是過渡和動畫,在實(shí)現(xiàn)過程中需要使用transition和animation屬性。
/* 基本轉(zhuǎn)換 */ div { transform: rotate(45deg); /* 旋轉(zhuǎn) */ transform: scale(2); /* 縮放 */ transform: skew(20deg); /* 變形 */ transform: translate(50px, 50px); /* 位移 */ } /* 過渡 */ div { transition: all 1s ease-in-out; /* 過渡屬性(所有屬性變化) */ } div:hover { transform: rotate(90deg); /* 鼠標(biāo)滑過旋轉(zhuǎn)90度 */ } /* 動畫 */ @keyframes my-animation { 0% { transform: scale(1); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } div { animation: my-animation 2s infinite; /* 動畫屬性 */ }
通過使用轉(zhuǎn)換可以使頁面元素在用戶交互或者視覺上產(chǎn)生更多的效果,使頁面更加生動。同時,需要注意不要過度使用轉(zhuǎn)換,以免對用戶體驗(yàn)造成負(fù)面影響。