[請益] 簡單圖片翻轉問題
我最近才剛學sublime
現在在家沒事想試試看把A圖翻轉後(rotateY 0->180)變成另外一張
有人願意幫忙我看一下code嗎?
順便講解錯在哪QQ
有不多的P幣當答謝
兩張圖我是包在同個div(wrap)裡面
兩張圖又有class box 和分別 pic1 and pic2
container則是在最外面(這樣是否多餘了些?)
1/22 23:20 已放圖code
圖放上來是指放code嗎??還是要上傳
對不起真的不是很懂
.contain{
perspective: 2500px ;
transform-style: preserve-3d ;
}
.box{
top:0;
left:0;
position:absolute;
}
.pic2{
-webkit-transform: rotateY(0deg) ;
transform: rotateY(0deg) ;
}
.pic1{
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg) ;
backface-visibility: hidden;
-webkit-backface-visibility:hidden;
}
.wrap:hover {
transform: rotateY(180deg) ;
-webkit-transform: rotateY(180deg);
transition:2s ;
}
<body>
<div class="contain">
<div class="wrap">
<img class="pic2 box" src="images/mar.jpg">
<img class="pic1 box" src="images/pro.jpg">
</div>
</div>
</body>
</html>
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.135.167.174
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1485014899.A.300.html
→
01/22 10:29, , 1F
01/22 10:29, 1F
→
01/22 12:10, , 2F
01/22 12:10, 2F
→
01/22 12:10, , 3F
01/22 12:10, 3F
→
01/22 13:31, , 4F
01/22 13:31, 4F
※ 編輯: lcy17 (220.135.167.174), 01/22/2017 22:55:37
推
01/22 23:07, , 5F
01/22 23:07, 5F
※ 編輯: lcy17 (220.135.167.174), 01/22/2017 23:22:29
討論串 (同標題文章)
Web_Design 近期熱門文章
PTT數位生活區 即時熱門文章