【过渡与动画 2-15】写transform:translateY(0)为什么箭头朝向右边？
来源：2-18 编程练习
easyschen
2021-11-23 14:59:14
问题描述：
Q1: 写transform:translateY(0)为什么箭头朝向右边？
相关截图：
相关代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2-9</title>
<style type="text/css">
div {
font-family: Arial;
font-size: 24px;
font-weight: bold;
position: absolute;
right: 50%;
bottom: 20px;
width: 30px;
height: 30px;
margin: 0;
transform: rotate(90deg);
/*此处写代码*/
animation : key 1s linear 0.5s infinite;
}
/*@keyframes key{*/
/* from{*/
/* transform:translateY(0);*/
/* }*/
/* to{*/
/* transform:translateY(20px);*/
/* }*/
/* }*/
@-webkit-keyframes key{
from{
bottom:20px;
}
to{
bottom:0px;
}
}
</style>
</head>
<body>
<div>></div>
</body>
</html>尝试过的解决方式：
@-webkit-keyframes key{
from{
bottom:20px;
}
to{
bottom:0px;
}
}
写回答
1回答
-
同学你好，代码实现效果可以。
针对提问回复：
动画中用了transform属性（平移），覆盖了默认设置的transform属性（旋转），所以箭头就没有了旋转的样式。
可以这样写
动画中将旋转也添加上。旋转之后，坐标轴也会跟着转，所以应该是在水平轴上移动。
自己测试下，祝学习愉快！
0h021-11-23
相似问题
这里的箭头会突然指向右边
回答 1
2-18 动画练习
回答 1