前端 - transform:rotate不能旋转的问题
问题描述
这个是我要的效果,箭头代码如下
.page4 .arrow-up{
position: absolute;width: 80/100rem;height: auto;margin-left: 50%;left:-40/100rem;bottom: 5%;animation: moveIconUp ease 2s both infinite;-webkit-animation: moveIconUp ease 2s both infinite;transform:rotate(180deg);-webkit-transform:rotate(180deg);
}
@-webkit-keyframes moveIconUp {
0% { -webkit-transform: translateY(120%); opacity: 0;}50% { -webkit-transform: translateY(0%); opacity: 1;}100% { -webkit-transform: translateY(-160%); opacity: 0;}
}
出来的效果是
箭头ui切出来是向下的,我是想用transform:rotate(180deg)把他转过来,不知道那里错了
问题解答
回答1:你的动画moveIconUp 里面设置了transform把它覆盖掉了。transform多个属性用空格隔开,不然后面写的会把前面的覆盖,这样写:transform:translateY(-160%) rotate(180deg)
回答2:transform里的各个属性不能单独设置
回答3:设置成块状元素
相关文章:
1. node.js - NPM安装包时有些情况会爆出一些的警告/报错信息怎么判断是否可以忽略?2. node.js - 用node安装express出错3. node.js - Hexo next主题 languages/zh-Hans.yml报错4. node.js - koa2 如何获取参数?5. node.js - 用git cnpm install 时,能生成node_modules文件,但是为空。6. node.js - 带有node_modules目录的项目,用phpstorm打开速度极慢,怎么解决?7. node.js - nodejs 正则匹配,cpu达到100%的问题8. node.js - nodejs中cookie例子的一个疑问9. javascript - 这种上传图片预览怎么做?10. java - 微信退款,公账号向个人转账SSL验证失败
![node.js - nodejs 正则匹配,cpu达到100%的问题](http://www.haobala.com/attached/image/news/202310/130436bb3c.png)