使用CSS 變換實現傾斜：傾斜兩側

提供的圖像展示了一種有趣的傾斜效果，該效果使元素的兩個角都形成角度。若要使用 CSS 轉換重新建立此效果，請按照下列步驟操作：

應用透視傾斜：

若要新增透視，請使用下列 CSS屬性：

transform: perspective(distance) rotateY(angle);

將「距離」替換為一個值以設定透視距離（值越高，透視距離越遠）。將“angle”替換為所需的旋轉角度（在本例中為 45 度）。

範例 CSS:

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

HTML 程式碼：

若要將傾斜套用至元素，請新增下列類別：

外部資源範例：

提供的CSS 和HTML 程式碼源自http://desandro.github.com/3dtransforms/docs /perspective.html。該網站提供了有關使用透視變換的更多範例和文件。