How to create such transformed block?

Want to practice my skills and don’t know how to make such transformed block.
Link to site:

the link you post is not proper it is not loading man

that could be done with the transform and skew property, in this case, it seems to be a background image though so probably photoshop

It is a pseudo-element with borders that is rotated (rotate3d) and has a scale3d transform transition. You can always just inspect the page and look at the CSS.

Here is a bit of a low effort version you can look at. I pretty much just copied the CSS for the pseudo-element and transition.


very nice I totally misunderstood the question :sweat_smile:

Thanx. Dont actually understand what change underlined number.image

This documentation page explains it

1 Like

I’m not sure I understand your question, sorry. But the underlined number is the z-coordinate in the rotate3d() function. Check out the docs linked to above.