如何使用 CSS 变换创建不规则正方形？-css教程-PHP中文网

如何使用 CSS 变换创建不规则正方形？

Patricia Arquette

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

原创

317 人浏览过

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