如何使用 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>

登录后复制

透视： 建立消失点，创造出幻觉深度。
RotateX: 沿 x 轴（水平）倾斜形状。
RotateY: 沿 y 轴旋转形状（垂直）。
RotateZ: 沿 z 轴（垂直于页面）旋转形状。

通过试验这些值，您可以实现各种不规则方形形状，为您的设计增添独特的触感。

以上是如何使用 CSS 创建不规则正方形？的详细内容。更多信息请关注PHP中文网其他相关文章！