CODEWITHSUNDEEP
css-transitionscss-animationscss-transforms
lpetrucci
lpetrucci

Reputation: 1699

How do I smooth out a 3D transform rotation?

I've been working on a 3D image made with CSS, the idea was to add some kind of animation to it and use it as a center piece in my portfolio, unfortunately I've been having trouble getting the animation to look smooth.

I am unsure if this is caused by a limit of CSS animation or by the fact that I am working in 3D, but I have not been able to get it to look quite right.

So far I've tried a lot of different values as well as adding more keyframes in the hopes the animation would smooth itself out but I have not had any luck.

I have a Codepen with all of the code, it can be found here.

I placed said keyframe animation at the top of the CSS file, it is named loading-cube

Unless I have been staring at this for too long and my eyes are playing tricks on me, the animation as it is currently has a "bounce".

This Codepen is a more accurate representation of how I would like my rotation to look like.

Upvotes: 1

Views: 363

Answers (1)

vals
vals

Reputation: 64244

Your order of the 2 different rotations is wrong, you should set the rotateX before the rotateY. If you do so, the animation is much more easy, just a 360 deg turn on the Y axis:

@keyframes loading-cube {
  0%  {transform: translateZ(-800px) rotateX(-19deg) rotateY(0deg);}
  100%  {transform: translateZ(-800px) rotateX(-19deg) rotateY(360deg);}
}

edited demo

Upvotes: 2

Related Questions