前端 - 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. javascript - 微信报redirect_uri参数错误2. Vue项目打包后发布到github pages上,如何访问?3. vue.js默认值,如何相加4. java - AtomicInteger等原子类,是不是不用volatile修饰,自带volatile属性?5. vue.js - vue获取mongodb中的数据起初显示未定义,但还是可以渲染6. javascript - 按钮链接到另一个网址 怎么通过百度统计计算按钮的点击数量7. head标签里的css文件可以设置body标签里的图片高度8. css3 - css flex 子元素居中9. javascript - vue2.0中使用vue2-dropzone的demo,vue2-dropzone的github网址是什么??百度不到。10. html5 - input type=’file’ 上传获取的fileList对象怎么存储于浏览器?
