如何使用 CSS 轉換來建立不規則的正方形？

使用CSS 創建不規則正方形

使用CSS、旋轉和透視變換的組合來實現所提供圖像中描繪的獨特形狀僱。以下程式碼片段示範如何操作：

<code class="css">.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}</code>

<code class="html"><div class="box"></div></code>

說明：

• perspective(180px)：建立3D 視角，給人以深度。
• rotateX(15deg)：將框繞 X 軸旋轉 15 度。
• rotateY(20deg)：將框繞 Y 軸旋轉 20 度。
• rotateZ(-3deg)：圍繞 Z 軸逆時針旋轉盒子 3 度。

透過組合這些變換，正方形形狀會扭曲和傾斜，導致如圖所示的不規則形狀參考圖片。

以上是如何使用 CSS 轉換來建立不規則的正方形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！