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