I'm trying to create a CSS animation that looks like a rotation around a picture or another div object around the "X" axis.

I managed to create a rough idea of ​​it at: Codepen , but the animated div doesn’t have the rotation effect I'm looking for.

I think I need to add rotateX () to some element in order to convert and add perspective, but I just can’t understand what combination is needed. I attached an approximate image of such an animation, which I am trying to get.

Here is my current animation code:

 @keyframes moveBack { 0%{transform:translateY(0); z-index:10;} 25%{transform:translateY(435px); z-index:10;} 26%{z-index:0;} 50%{transform:translateY(0) scale(.8); z-index:0;} 75%{transform:translateY(-435px); z-index:0;} 76%{z-index:10;} 100%{transform:translateY(0); z-index:10;} }

enter image description here

Source: 3D Transform around the X axis

You can try to use the effect of CSS3 - 3D rotation, for example: transform:rotateX(-100deg); here's a link for more information - w3schools.com @ Kyle Pastor

1 answer 1

There is a simple 3D transaction that looks like what you are trying to get. The question is that you use translate to move, but your goal is to rotate along the x axis. To start the rotation, move the cursor to the div (rectangle):

 div{ position:relative; width:300px; height:200px; margin:10% auto; perspective:500px; transform-style:preserve-3d; border:1px solid #000; } img{width:100%;} p{ position:absolute; left:250px; top:75px; width:80px; height:40px; margin:0; padding:5px 10px; background:gold; transform: rotateX(0deg) translatez(110px); transition:transform 2s; } div:hover p{ transform: rotateX(360deg) translatez(110px); } 
 <div> <img src="http://i.imgur.com/k8BtMvj.jpg"/> <p>Hover the div</p> </div>

If you want the rotating div to always orient one side to the face of the user, then you can add the following turn, after such a translatez :

 div{ position:relative; width:300px; height:200px; margin:10% auto; perspective:500px; transform-style:preserve-3d; border:1px solid #000; } img{width:100%;} p{ position:absolute; left:250px; top:75px; width:80px; height:40px; margin:0; padding:5px 10px; background:gold; transform: rotateX(0deg) translatez(130px) rotateX(0deg); transition:transform 5s; } div:hover p{ transform: rotateX(360deg) translatez(130px) rotateX(-360deg); } 
 <div> <img src="http://i.imgur.com/k8BtMvj.jpg"/> <p>Hover the div</p> </div>

This works because when you perform a property conversion chain on the same ad, the last one runs at the end of the previous one. The coordinate system moves with the previous transformations.

Translation of the answer: 3D Transform around the X axis @ web-tiki