0

I'm looking to make an image look 3d with css. I apologize if I don't describe that properly, heres an image of what I'm looking for enter image description here

Tom Burn
  • 25
  • 4
  • 2
    Does this answer your question? [3D Image rotation CSS](https://stackoverflow.com/questions/62482024/3d-image-rotation-css) – Malik Hamza Aug 25 '21 at 17:43

2 Answers2

1

The CSS transform property lets you do this with a rotate3D value which sets the axis of rotation and the amount to be rotated. In this case the only axis you are interested in is the Y-axis.

Here is a really simplistic example. You need to read up about the various settings to get exactly what you want, especially to accommodate different screen sizes appropriately.

img {
  width: 20vw;
  position: relative;
  top: 20vh;
  left: 20vw;
  height: auto;
 transform: perspective(200px) rotate3D(0, 1, 0, 30deg);
}
<img src="https://picsum.photos/id/1015/300/200"/>
A Haworth
  • 30,908
  • 4
  • 11
  • 14
-1
transform: rotate3d(0, 1, 0, 45deg);

Add this to your img in css. It rotates the img 45 degrees from the y-axis.

rivrug
  • 177
  • 3
  • 8
  • Please read [answer] and add a working [repro] for validation. A `code-only` answer can be considered low-quality. They are hard to understand and as such hard or impossible to reproduce. – tacoshy Aug 25 '21 at 18:51