css - Perspective required for proper rotating animation -


I had a problem where I used to rotate the two parts of an image in the opposite direction of the y-axis with these images Two animations were trying:

  @ - WebKit-keyframe first {0% {-webkit-transform: rotateY (0); } 100% {-webkit-transform: rotateY (-90 degrees); }} @ -WebKit-keyframe seconds {0% {-bbkit-transform: rotated Y (0);} 100% {-webkit-transform: rotated Y (90 degrees); }}   

Despite the different values ​​for the last keyframe, two animations rotated in one direction correctly tell me that to control my code, I perspective < To implement / code> is necessary to create an effect function (to check the checkbox which will apply and remove perspective from the 3D space):

- Chrome Only

I'm curious about this Volved. From MDN:

Perspective CSS property, Z = 0 determines the distance between the plane and the user in order to give the 3-D element in order. Each 3D element z & gt; 0 gets bigger; Each 3D-element z & lt; 0 becomes the strength of the effect determined by the value of this property.

By my understanding, perspective leads the audience with the z plane, which makes the 3D effect more or less intense I do not understand That is how much walking with a z plane that affects the direction of the rotation of an element in such fashion. I would have thought that perspective is influenced only by how dramatic the effect is, and the direction in which the element rotates

Obviously, the application of perspective In my example every half image is necessary for proper rotation direction, but why?

Both parts are moving right around the Y axis, in the right direction. Without trouble, without perspective, they do not see that they are roaming differently.

Applying perspective in this case basically makes one side of the larger image from the other side, because it revolves around the Y axis. If there is no perspective then both sides of the image remain the same size, despite the image spinning direction.

Look at the whole image rotating without perspective, and imagine that it is a direction. Then close your eyes, and when you open them again, imagine that it is moving in the other direction. Magic!

Comments

Popular posts from this blog

Pass DB Connection parameters to a Kettle a.k.a PDI table Input step dynamically from Excel -

multithreading - PhantomJS-Node in a for Loop -

c++ - MATLAB .m file to .mex file using Matlab Compiler -