How to make image look like it is rotating?

[ChristianSirolli]

I want to take an image and make it look like it is rotating along its X-axis. How can I do this? Here is what I have so far:

CodePen

Basically, I want the Hershey Bar pic to look like it is rotating on its X-axis. Any ideas?

[JeroenR]

In your animation, you’re changing the width, which gives you the idea the image is rotating along the y-axis. Why not use the height then?
Or, another way is using rotation, like this:

    0%   {transform: rotateX(0deg);}
    50% {transform: rotateX(90deg);}
    100% {transform: rotateX(0deg);}

[Author]

Posts