Как сделать чтобы у меня 3д анимация вращения не плавала в дополнительной плоскости?

Question

[Евгения]

сделала маленькую анимацию вращающегося бруска, чтобы показывать ответ эффектней. Но он гуляет туда сюда - не просто проворачивается, а поднимается и опускается, хотя ему задана transform-origin: center;
В чем может быть проблема?

Answer 1

[Ivan Bogachev]

У нас три координаты - XYZ. Для CSS все элементы на странице - плоские, у них нет толщины, и их размеры по оси Z нулевые. Поэтому CSS за нас не угадает, куда должен смещаться transform-origin по оси Z для кирпичика, который существует исключительно в нашем воображении. Вы смещаете грани кирпичика в отрицательные значения по оси Z, но точка transform-origin, через которую проходит ось вращения, остается в плоскости Z = 0.

Получается, что вам нужно как-то вручную совместить ось вращения и центр кирпичика. Тут два пути - либо сместить точку transform-origin на пол кирпичика вглубь по Z:

.cube {
    transform-origin: 50% 50% -25px;
}

Так ось вращения будет проходить через его текущий центр. Либо сместить грани кирпичика, чтобы он изначально собирался не "весь вглубь экрана", а "половина вглубь, половина к нам". Его центр сразу будет в плоскости Z = 0, где по умолчанию находится transform origin, и не нужно будет ничего дополнительно двигать.

Comments

[Евгения]

Большое спасибо за подробный ответ! Не каждый будет тратить время, чтобы так доступно все объяснить. Еще раз огромное спасибо!

Answer 2

[Ivan Ustûžanin]

transform-origin: center center -25px; для .cube
проблема в том, что "брусок" ниже плоскости Z, вокруг которой по умолчанию и происходит итоговое вращение — вот его при 3Д трансформации и плющит