css - transform:rotate不能旋转的问题
本文介绍了css - 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)把他转过来,不知道那里错了
解决方案
你的动画moveIconUp 里面设置了transform把它覆盖掉了。transform多个属性用空格隔开,不然后面写的会把前面的覆盖,这样写:transform:translateY(-160%) rotate(180deg)
这篇关于css - transform:rotate不能旋转的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文