Ситуация следующая, когда кубу нужно повернуться по оси Х (с -40deg на 40deg), он почему-то подпрыгивает , при этом в конце анимации я делаю обратное (с 40deg на -40deg) и кубик вращается нормально. Подскажите пожалуйста, в чём может быть причина ! Код приведен ниже....
.container {
position: relative;
top: 500px;
}
.box {
position: absolute;
font-size: 4em;
width: 2em;
height: 2em;
margin: 1.5em auto;
perspective: 10000px;
transform-style: preserve-3d;
transform: rotateX(-40deg) rotateY(44deg);
}
.box11 {
animation: rot11 12s linear infinite;
}
.side {
position: absolute;
width: 2em;
height: 2em;
background: linear-gradient(#e66465, #9198e5);
color: white;
}
.top {
transform: rotateX( 90deg) translateZ(1em);
background: linear-gradient(153deg, #e66465, #9198e5);
animation: topUCol 24s linear infinite;
}
.right {
transform: translateZ(1em);
animation: rightUCol 24s linear infinite;
}
.left {
transform: rotateY(-90deg) translateZ(1em);
background: linear-gradient(127deg, #c45a5b, #6f76b2);
}
.bottom {
transform: rotateX(-90deg) translateZ(1em);
animation: bottomUCol 24s linear infinite;
}
@keyframes rot11 {
0% {
transform: rotateX(-40deg) rotateY(44deg);
}
10% {
transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);
}
40% {
transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);
}
50% {
transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);
}
60% {
transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);
}
70% {
transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);
}
80% {
transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);
}
90% {
transform: rotateX(40deg) rotateY(44deg);
}
100% {
transform: rotateX(-40deg) rotateY(44deg);
}
}
<div class='container'>
<div class='box box11'>
<div class='left side '></div>
<div class='right side'></div>
<div class='top side'></div>
<div class='bottom side'></div>
</div>
</div>