如何用CSS建立不規則的正方形？

在CSS 中建立不規則正方形

在CSS 中建立不規則形狀可能是一項具有挑戰性的任務，但這並非不可能。透過正確組合 CSS 轉換，您可以創建獨特且引人注目的設計。在本文中，我們將向您展示如何使用 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>

perspective 屬性建立一個應用變換的3D 空間。 rotateX、rotateY 和 rotateZ 屬性分別繞 x、y 和 z 軸旋轉元素。

使用這些轉換，您可以建立一個看起來傾斜和旋轉的不規則正方形。您可以調整 rotateX、rotateY 和 rotateZ 屬性的值來建立不同的方向和角度。

HTML 結構:

要使用此程式碼，只需新增一個

;將class 屬性設為「box」的HTML 文件元素：

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

產生的方塊將在網頁上顯示為不規則立方體。您可以嘗試使用 CSS 程式碼來建立不規則正方形的不同變體。

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