Home > Article > Web Front-end > 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:
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!