使用 CSS 轉換創建傾斜效果

在網頁設計領域，CSS 轉換提供了操縱空間元素的強大工具。您可以實現的有趣效果之一是傾斜，使元素呈現傾斜或扭曲的外觀。

使用 CSS 變換實現角傾斜

問題出現了：如何您創建了像提供的示例一樣的傾斜效果，其中兩個角都是傾斜的？

答案：

要實現此效果，您可以結合使用變換屬性透視和旋轉Y。這是一個例子：

.red.box {
  background-color: red;
  transform: perspective(600px) rotateY(45deg);
}

說明：

• 觀點：定義視角變換的消失點，創造3D 效果。較高的值模擬較大的距離。
• rotateY：沿著 Y 軸旋轉元素，使其呈現傾斜的外觀。正值順時針旋轉，反之亦然。

透過組合這些屬性，您可以建立變形元素兩個角落的傾斜效果，如範例影像所示。