An Interest In:
Web News this Week
- March 21, 2024
- March 20, 2024
- March 19, 2024
- March 18, 2024
- March 17, 2024
- March 16, 2024
- March 15, 2024
February 13, 2021 09:21 pm GMT
Original Link: https://dev.to/afif/3d-image-with-one-element-1c87
3D image with one element
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
I have nothing more to add than: Enjoy!
We can easily adjust the above to consider any direction. Here is for the bottom one:
I won't do the other directions, I will let you do it alone
Original Link: https://dev.to/afif/3d-image-with-one-element-1c87
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To