課程
/前端開發
/HTML/CSS
/十天精通CSS3
為什么鼠標hover上去,圖片翻轉上去后,文字翻轉上來的位置偏下,如下圖所示,想知道這個位置怎么控制的,感謝
2017-07-14
源自:十天精通CSS3 12-4
正在回答
.item:hover {
? ? ? ? /*任務四、懸浮狀態改變每個列表項的transform效果*/
? ? ? ? -webkit-transform: translateZ(-50px) rotateX(95deg);
? ? ? ? -moz-transform: translateZ(-50px) rotateX(95deg);
? ? ? ? -ms-transform: translateZ(-50px) rotateX(95deg);
? ? ? ? -o-transform: translateZ(-50px) rotateX(95deg);
? ? ? ? transform: translateZ(-50px) rotateX(95deg);
? ? ? ? }
是不是任務四的translateZ(-50px) 寫成translateY(50px)?
因為給出空間不夠,字放不下,你可以調小字體或者更改圖片翻上去后的容器寬度!
舉報
本課程為CSS3入門教程,深刻詳解CSS3知識讓網頁穿上絢麗裝備
3 回答鼠標從圖片上邊hover的時候 翻轉動畫會卡住 老師 這是什么原因,怎么改善代碼呢
1 回答圖片翻轉效果哪里有問題?
4 回答css樣式并沒有hover啊 怎么實現鼠標放上去觸發效果的?
2 回答怎樣可以使鼠標移開的時候,它直到完全放下來才會對我的hover有響應,下到一半我鼠標移上去它又上去了,不太美觀。
2 回答圖片變形 圖片上的文字不變形該怎么做
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2017-08-01
.item:hover {
? ? ? ? /*任務四、懸浮狀態改變每個列表項的transform效果*/
? ? ? ? -webkit-transform: translateZ(-50px) rotateX(95deg);
? ? ? ? -moz-transform: translateZ(-50px) rotateX(95deg);
? ? ? ? -ms-transform: translateZ(-50px) rotateX(95deg);
? ? ? ? -o-transform: translateZ(-50px) rotateX(95deg);
? ? ? ? transform: translateZ(-50px) rotateX(95deg);
? ? ? ? }
是不是任務四的translateZ(-50px) 寫成translateY(50px)?
2017-07-15
因為給出空間不夠,字放不下,你可以調小字體或者更改圖片翻上去后的容器寬度!