文章詳情頁
前端 - transform:rotate不能旋轉的問題
瀏覽：85日期：2024-06-10 18:23:04
問題描述
這個是我要的效果，箭頭代碼如下
.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. 求救一下，用新版的phpstudy，數據庫過段時間會消失是什么情況？2. linux運維 - python遠程控制windows如何實現3. javascript - 從mysql獲取json數據，前端怎么處理轉換解析json類型4. django - Python error: [Errno 99] Cannot assign requested address5. android - 安卓做前端，PHP做后臺服務器 有什么需要注意的？6. python小白 關于類里面的方法獲取變量失敗的問題7. mysql - ubuntu開啟3306端口失敗,有什么辦法可以解決？8. thinkPHP5中獲取數據庫數據后默認選中下拉框的值，傳遞到后臺消失不見。有圖有代碼，希望有人幫忙9. extra沒有加載出來10. python - Scrapy如何得到原始的start_url
排行榜
網公網安備