How to Create an Irregular Square Shape with CSS Transforms?

Creating an Irregular Square Shape in CSS

To create the irregular square shape depicted in the image, we can employ a combination of rotation and perspective transforms in CSS. This technique allows us to create 3D-like effects without using complex 3D modeling software.

CSS Code:

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

HTML Markup:

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

Explanation:

• Perspective: This property creates the illusion of depth by applying perspective to the element. The value is set to 180px.
• Rotation Transforms: We apply three rotation transforms along the x-axis (15deg), y-axis (20deg), and z-axis (-3deg). These rotations collectively skew the square and give it its irregular shape.

By combining these transforms, we can create the desired irregular square shape as seen in the image.

The above is the detailed content of How to Create an Irregular Square Shape with CSS Transforms?. For more information, please follow other related articles on the PHP Chinese website!