为什么rotate（90deg）没有作用了？？

首页课程实战体系课手记专栏慕课教程

来源：2-29 编程练习

Seattle0

2017-07-26 11:56:30

<!DOCTYPE html>

<html>

<head>

div {

font-family: Arial;

font-size: 72px;

font-weight: bold;

position: fixed;

right: 0;

left: 0;

top:500px;

width: 30px;

height: 30px;

margin: auto;

transform: rotate(90deg);

animation: disp 2s .5s infinite ease-in-out;

/*此处写代码*/

}

@keyframes disp{

from{transform: translateY(0px);}

to{transform: translateY(90px);}

}

</style>

</head>

<body>

</body>

</html>

写回答

1回答

好帮手慕糖

2017-07-26

你好，刚开始进入页面是没有发生动画时，是有旋转的，后来动画发生，动画中，又有个transform，导致把上面的动画属性替换了。建议：可在动画中的时候也发生旋转，如下代码可参考；

@keyframes disp{
     from{transform: translateY(0px) rotate(90deg);}
      to{transform: translateY(90px) rotate(90deg);}
 }

或者，动画，只改变据底部的距离，例：

@keyframes direc {
    from { bottom: 100px; }
    to   { bottom: 10px; }
}

祝学习愉快！

0 学习 · 5760 问题

相似问题

回答 3

回答 1

回答 2

回答 1