可以用 css （更少）动画旋转（Y）更改文本吗？

Question

我被困在这里了。任何人都知道下面代码中的错误在哪里？试了搜索，试了各种代码，我能想到的。出于某种原因，文本不会改变，只会显示 "Original Text" 甚至没有旋转（但外观会发生变化）。我想旋转 (Y) 并在旋转时更改外观和文本。感谢任何帮助，谢谢。

.test:before {
content: "Original Text";
font-size: 250%;
font-weight: bold;
padding-top: 25px;
color: #ffffff;
-webkit-animation: anim 4s infinite alternate ease-in-out;
animation: anim 4s infinite alternate ease-in-out;
}
@-webkit-keyframes anim {
from {text-shadow: 2.5px 2.5px 2.5px #333333; -webkit-transform: rotateY(0deg); transform: rotateY(0deg);}
to {-webkit-text-stroke: 0.5px #800000; -webkit-transform: rotateY(180deg); transform: rotateY(180deg);}
}
@keyframes anim {
from {text-shadow: 2.5px 2.5px 2.5px #333333; -webkit-transform: rotateY(0deg); transform: rotateY(0deg); content: "Original Text";}
to {-webkit-text-stroke: 0.5px #800000; -webkit-transform: rotateY(180deg); transform: rotateY(180deg); content: "Changed Text";}
}

Answer 1

伪元素需要 display:inline-block 才能进行转换。

.test:before {
  display: inline-block;
  content: "Original Text";
  font-size: 250%;
  font-weight: bold;
  padding-top: 25px;
  color: #ffffff;
  -webkit-animation: anim 4s infinite alternate ease-in-out;
  animation: anim 4s infinite alternate ease-in-out;
}

@-webkit-keyframes anim {
  from {
    text-shadow: 2.5px 2.5px 2.5px #333333;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
  to {
    -webkit-text-stroke: 0.5px #800000;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}

@keyframes anim {
  from {
    text-shadow: 2.5px 2.5px 2.5px #333333;
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    content: "Original Text";
  }
  to {
    -webkit-text-stroke: 0.5px #800000;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    content: "Changed Text";
  }
}

<div class="test"></div>

可以用 css （更少）动画旋转（Y）更改文本吗？

change text with css (less) animation rotate (Y) possible?

css

text

rotation

css-animations