如何使用 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中文网其他相关文章！