如何使用 CSS 變換透視來建立梯形形狀？

使用 CSS3 繪製梯形

使用 CSS3 建立梯形需要一些巧妙的技巧。儘管建議使用 CSS3 3D 變換，我們還是探索了一種利用 CSS 變換透視的現代方法。

CSS 變換透視

CSS 變換透視屬性引入了 3D 空間元素，允許它們圍繞指定的視角旋轉。透過將透視值應用於元素，然後沿著其中一個軸（X、Y 或 Z）旋轉它，我們可以創建梯形的錯覺。

範例

考慮以下CSS code:

.trapezoid {
  width: 200px;
  height: 200px;
  background: red;
  transform: perspective(10px) rotateX(1deg);
  margin: 50px;
}

HTML:

<div class="trapezoid"></div>

HTML:

在此範例中，類別在此範例中，類別在此範例.trapezoid 的元素配置為寬度和高度為200 像素、紅色背景和應用10 個像素的透視和沿X 軸旋轉1 度的變換。 產生的元素將顯示為頂部和底部稍微傾斜的梯形。隨著視角值的增加，效果變得更加明顯。

以上是如何使用 CSS 變換透視來建立梯形形狀？的詳細內容。更多資訊請關注PHP中文網其他相關文章！