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' */
}

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

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 😉

Comments

[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 :(

[Michael Hungbo]

This is jaw-dropping!

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

[Vishal2369]

It's mindblowing.

[Miss Diana]

"Very Very Very Impressive and Amazing!" -- AGREED!!!
Like Mr. Nahian, I am a novice when it comes to CSS, but I am hoping to figure out how to use this AMAZING CSS -- especially by having the hover do the transition to side view while the static is face on. Thank you for all of your amazing CSS tricks!

Also, as per Rob, I am interested in "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." Looking forward to experimenting!! Thank you again!

[Jose Luis Ramos T.]

Muy interesante. Gracias por compartir.

[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.