关键帧文本翻译和旋转不起作用[重复]

Question

我喜欢翻译并将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;
  }
}