CSS 變形效果
如何使用 CSS transform 屬性 變形效果可讓你在 2D 或 3D 空間中，移動、旋轉、縮放和扭曲元素。它們是一個非常酷的 CSS 功能，尤其是與動畫結合時。 2D 變形效果 transform 屬性接受以下函數： translate() 移動元素 rotate() 旋轉元素 scale() 按比例縮放元素的大小 skew() 扭曲元素 matrix() 使用 6 個元素的矩陣執行上述任一操作，這種寫法不太直觀，但節省空間 我們還有具體軸的函數： translateX() 在 X 軸上移動元素 translateY() 在 Y 軸上移動元素 scaleX() 按比例縮放元素在 X 軸上的大小 scaleY() 按比例縮放元素在 Y 軸上的大小 skewX() 扭曲元素在 X 軸上 skewY() 扭曲元素在 Y 軸上 以下是一個示例，使用變形效果將 .box 元素的寬度放大為原來的2倍，高度縮小為原來的一半： .box { transform: scale(2, 0.5); } transform-origin 屬性可以設置變形的原點（即 (0, 0) 坐標），從而改變旋轉中心。 組合多個變形效果 你可以通過在每個函數之間使用空格將多個變形效果組合在一起。 例如： transform: rotateY(20deg) scaleX(3) translateY(100px); 3D 變形效果 我們還可以進一步，在 3D 空間而不是 2D 空間中移動元素。在 3D 空間中，我們增加了另一個軸，即 Z 軸，使視覺效果更具深度。...