为什么在from和to里面不加rotate(90deg)，箭头方向会不正确？

<!DOCTYPE html>
<html>
<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);
            /*此处写代码*/
            position: absolute;
            bottom: 100px;
            animation: haha 1s .5s linear infinite;
        }
        @keyframes haha{
            from {
                transform: translateY(0);
            }
            to {
                transform: translateY(100px);
            }
        }
    </style>
</head>
<body>
    <div>&gt;</div>
</body>
</html>

qq_鸭绿桥第一帅哥_0 2019-03-19

源自：CSS3动画 2-28 编程练习

收起

2回答

好帮手慕星星回答被采纳获得+3积分 2019-03-19 13:12:55

你好，是动画中的transform属性将之前设置的transform属性给覆盖了，所以之后translate移动的效果。

在动画中添加rotate旋转之后，还需要修改移动的方向，应该是x轴：

因为元素旋转之后，坐标轴也会跟着旋转，垂直方向就变成了x轴，如果想要上下移动，需要改变x轴的位置。

自己可以重新测试下，祝学习愉快！

收起回答

qq_鸭绿桥第一帅哥_0 提问者 #1

谢谢老师。还有一个问题。为什么rotate和translate的顺序颠倒会导致结果不同呢？ @keyframes haha{ from { transform: rotate(90deg) translateX(0) ; } to { transform: rotate(90deg) translateX(100px) ; } } @keyframes haha{ from { transform: translateX(0) rotate(90deg); } to { transform: translateX(100px) rotate(90deg); } }

2019-03-19 13:24:19