前端 - transform:rotate不能旋转的问题

Question

这个是我要的效果，箭头代码如下

.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)把他转过来，不知道那里错了

Answer 1

你的動畫moveIconUp 裡面設定了transform把它覆蓋掉了。 transform多個屬性用空格隔開，不然後面寫的會把前面的覆蓋，這樣寫：transform:translateY(-160%) rotate(180deg)

Answer 2

transform裡的各個屬性不能單獨設定

Answer 3

設定成塊狀元素