如何使用 CSS 建立不規則正方形？-css教學-PHP中文網

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

Barbara Streisand

發布： 2024-11-03 17:38:03

原創

656 人瀏覽過

How Can I Create Irregular Squares with CSS?

用 CSS 製作不規則的正方形

想像一個挑戰傳統對稱性的正方形？ CSS 提供了製作不規則形狀的工具，如圖所示。

秘密在於巧妙使用變換屬性，主要是透視、rotateX、rotateY 和rotateZ。這些屬性可讓您操縱形狀的 3D 方向，創建不規則角度和深度的錯覺。

在提供的範例中，CSS 程式碼完成此轉換：

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

登入後複製

透視： 建立消失點，創造深度幻覺。
旋轉 X： 沿 x 軸（水平）傾斜形狀。
RotateY: 沿 y 軸（垂直）旋轉形狀。
RotateZ: 沿 z 軸（垂直於頁）旋轉形狀。

透過嘗試這些數值，您可以實現各種不規則的正方形形狀，為您的設計增添獨特的觸感。

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