css中的 transform 屬性可操縱元素的外觀,包括:translate():移動元素rotate():旋轉元素scale():縮放元素skew():扭曲元素matrix():使用矩陣定義自定義變換perspective():創建 3d 效果
CSS 中 transform 的用法
transform
是 CSS 中用于操縱元素的外觀,而不會影響其尺寸或位置的一個強大的屬性。它通過一系列變換函數來實現,包括:
平移、旋轉和縮放
translate()
:移動元素。
rotate()
:旋轉元素。
scale()
:縮放元素。
示例:
<code class="<a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css">/* 將元素向右移動 50px */ transform: translate(50px); /* 順時針旋轉元素 30 度 */ transform: rotate(30deg); /* 將元素放大到原始尺寸的 2 倍 */ transform: scale(2);</code>
登錄后復制
復合變換
transform
屬性可以組合多個變換函數,以實現更復雜的效果。
示例:
<code class="css">/* 同時向右移動元素 50px 并將其向上旋轉 30 度 */ transform: translate(50px) rotate(30deg);</code>
登錄后復制
變形
transform
也可用于變形元素,從而創建視覺上獨特的形狀。
skew()
:扭曲元素。
matrix()
:使用矩陣定義自定義變換。
示例:
<code class="css">/* 向右傾斜元素 10 度 */ transform: skew(10deg); /* 使用矩陣定義自定義變換 */ transform: matrix(1, 0, 0.5, 1, 0, 0);</code>
登錄后復制
透視
transform
中的透視屬性允許創建 3D 效果,使元素看起來具有深度。
示例:
<code class="css">/* 設置元素的透視,使其看起來具有深度 */ transform: perspective(500px); /* 沿 z 軸旋轉元素 */ transform: perspective(500px) rotateZ(30deg);</code>
登錄后復制
注意:
transform
不會影響元素在文檔流中的位置。
瀏覽器對 transform
屬性的支持程度有所不同。
使用 transform
時,性能可能會受到影響,尤其是在動畫 complex 變換時。