关键帧文本翻译和旋转无效[重复项]

Question

此问题已经在这里有了答案：

How to apply multiple transforms in CSS?（9个答案）

关闭上个月。

我喜欢翻译Y并将h1元素旋转到其位置。但是翻译不起作用，并且在旋转文本时会离开它的位置并返回，但是我希望它一直都在它的位置。

代码：

.article1 h1{
    font-size: 50px;
    font-weight: 600;
    margin-top: 130px;
    margin-bottom: 12px; 
    animation: tilt 2s ease 3;
} 
@keyframes tilt{
  0% {
    transform: translateY(200px);
    transform: rotateY(0deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(0px);
    transform: rotateY(360deg);
    opacity: 1;
  }
}

我需要h1从200px顶部到达其位置，并在下降时进行360度Y旋转，可以吗？

Answer 1

[您的rotateY转换正在覆盖您的translateY转换，您需要在一条转换行中同时包含rotateY和translateY

尝试一下：

@keyframes tilt{
  0% {
    transform: translateY(200px) rotateY(0deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(0px) rotateY(360deg);
    opacity: 1;
  }
}