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

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

Patricia Arquette

發布： 2024-11-02 12:05:30

原創

319 人瀏覽過

How to Create an Irregular Square Shape with CSS Transforms?

在CSS 中建立不規則正方形

要建立影像中描繪的不規則正方形，我們可以結合使用旋轉和CSS 中的透視變換。這項技術使我們無需使用複雜的 3D 建模軟體即可創建類似 3D 的效果。

CSS 代碼：

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

登入後複製

HTML標記：

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

登入後複製

說明：

透視：

此屬性透過將透視應用於元素。該值設定為 180px。

旋轉變換：

我們沿著 x 軸 (15deg)、y 軸 (20deg) 和 z 軸 (-3deg) 應用三個旋轉變換）。這些旋轉共同扭曲了正方形並賦予其不規則形狀。

透過組合這些變換，我們可以建立所需的不規則正方形形狀，如圖所示。

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