我有一个首字母缩略词在屏幕中间水平显示然后动画播放翻转是垂直的。唯一的问题是我不能让它旋转单个字母一旦它垂直，所以文本都是从上到下，而不是从左到右。
下面是我目前的:https://noahark.w3spaces.com/saved-from-Tryit-2022-04-29.html
<!DOCTYPE html>
<html>
<head>
<style>
.move{
font-size: 105px;
position: relative;
animation: mover 5s ease 0s normal forwards;
}
.move span
{
position: relative;
animation: rotate 5s ease 0s normal forwards;
}
@keyframes mover {
0.0%{
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100%{
transform: scale(1) translate(-20%, 300px) skew(0deg) rotate(90deg);
}
}
@keyframes rotate
{
0.0%{
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100%{
transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
}
}
</style>
</head>
<body>
<CENTER>
<h2 class="move">
<span>L</span>
<span>E</span>
<span>M</span>
<span>O</span>
<span>N</span>
</h2>
</CENTER>
</body>
</html>
基本上只需要所有的字母翻转到正确的方向(从左到右)，同时仍然保持垂直。
这样的
L
E
M
O
N
非常感谢所有的帮助!
这段代码与你的代码段完全相同，只是span被做成了inline-block，所以它们服从转换:
<!DOCTYPE html>
<html>
<head>
<style>
.move {
font-size: 105px;
position: relative;
animation: mover 5s ease 0s normal forwards;
}
.move span {
position: relative;
display: inline-block;
animation: rotate 5s ease 0s normal forwards;
}
@keyframes mover {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
transform: scale(1) translate(-20%, 300px) skew(0deg) rotate(90deg);
}
}
@keyframes rotate {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
}
}
</style>
</head>
<body>
<CENTER>
<h2 class="move">
<span>L</span>
<span>E</span>
<span>M</span>
<span>O</span>
<span>N</span>
</h2>
</CENTER>
</body>
</html>