DEV Community

Cover image for 3D image with one element
Temani Afif
Temani Afif

Posted on • Updated on

3D image with one element

Find out more CSS tricks at css-tip.com

A quick trick to create a 3D illustration using only an <img> tag. No pseudo elements, no extra tag, no SVG, Nothing! Only one tag and few lines of CSS.

Here you go

Let's dig into the code

img {
  --x:10px;
  --y:20px;
  clip-path:polygon( /* 4 */
       var(--y)              var(--y),  /* a */
       calc(100% - var(--y)) var(--y),  /* b */
       calc(100% - var(--y)) calc(100% - var(--y)), /* c */
       var(--y)              calc(100% - var(--y)), /* d */
       0 calc(100% - var(--x) - var(--y)), /* x */
       0 calc(var(--x) + var(--y))); /* y */
  transform:perspective(1000px) rotateY(40deg); /* 5 */
  outline: var(--y) solid rgba(0,0,0,0.4); /* 1 */
  outline-offset: calc(-1*var(--y)); /* 2 */
  padding:var(--y) var(--y) var(--y) 0; /* 3 */
}
img:hover { /* 6 */
  transform:perspective(1000px) rotateY(0deg);
  clip-path:polygon(
       var(--y)              var(--y), /* a */
       calc(100% - var(--y)) var(--y), /* b */
       calc(100% - var(--y)) calc(100% - var(--y)), /* c */
       var(--y)              calc(100% - var(--y)), /* d */
       var(--y)  calc(100% - var(--x) - var(--y)), /* x' */
       var(--y)  calc(var(--x) + var(--y))); /* y' */
}
Enter fullscreen mode Exit fullscreen mode

Here is a step by step illustration to understand each line of code

3D illustration

I have nothing more to add than: Enjoy!


We can easily adjust the above to consider any direction. Here is for the bottom one:

3D bottom persepective

I won't do the other directions, I will let you do it alone 😉

Top comments (6)

Collapse
 
alnahian2003 profile image
Al Nahian

Very Very Very Impressive and Amazing!

I'm gonna bookmark your post to test it later. The demo works fine and the code looks good. It seems like, I don't know that much of CSS :(

Collapse
 
robbiez2005 profile image
rob

Excellent job. Is there an easy way for the initial wrap/side part of the image to be created from a separate image and not clipped from the main image. Also, is it possible to have the wrap/side part of the image as a solid colour.

Collapse
 
jlrxt profile image
Jose Luis Ramos T.

Muy interesante. Gracias por compartir.

Collapse
 
vishal2369 profile image
Vishal2369

It's mindblowing.

Collapse
 
heymich profile image
Michael Hungbo • Edited

This is jaw-dropping!

Amazing hacks Temani! Now I know my knowledge of CSS is on the LHS of the number line 😓

Some comments may only be visible to logged-in visitors. Sign in to view all comments.