这里的箭头会突然指向右边
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
div {
font-family: Arial;
font-size: 72px;
font-weight: bold;
position: fixed;
right: 0;
left: 0;
width: 30px;
height: 30px;
margin: auto;
transform: rotate(90deg);
animation: movedown 3s linear 5s infinite alternate;
}
@keyframes movedown{
from{
transform: translate(0,0);
}
to{
transform: translate(0,100px);
}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>
正在回答 回答被采纳积分+1
同学你好，问题解答如下：
1、箭头突然指向右边的原因为：在上面设置了旋转90度，然后下面设置了在3秒后进行平移操作，下面的同名属性（transform）会覆盖了上面（transform），导致rotate属性丢失了，所以箭头旋转效果失效。
2、建议修改为：在下面加上旋转属性就可以实现效果，上面的可以不设置，如下：
祝学习愉快！
-
慕后端3043291 #2
@keyframes movedown {
from {
transform:rotate(90deg) translate(0, 0);
}
to {
transform:rotate(90deg) translate(0, 20px);
}
}为什么这么写无效
2021-02-25 11:16:27 -
同学你好，老师测试代码是有效果的，代码中先是设置了旋转，然后再进行的平移，因为箭头旋转后X轴就变成了垂直方向上的，所以箭头是在水平方向移动的，（老师上面给的修改建议是把平移放在了前面，旋转放在后面，先平移后旋转就没有这样的问题）
所以要想实现垂直方向上的移动就要设置X轴的值，如下图：
（可以优化一下代码动画的设置，更美观一些，具体如下图）
祝学习愉快！
2021-02-25 16:52:10
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星