作者lcy17 (Aoie)
看板Web_Design
標題[請益] 簡單圖片翻轉問題
時間Sun Jan 22 00:08:15 2017
我最近才剛學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
→ nohara001: a圖是…………… 01/22 10:29
→ lcy17: 哈哈 是代號而已啦a翻牌後換b圖 類似撲克牌那樣 01/22 12:10
→ lcy17: 難道是因為有誤會才沒人幫忙嗎QQ 01/22 12:10
→ Ammenze: 你的code不放上來，誰能回答你 01/22 13:31
※ 編輯: lcy17 (220.135.167.174), 01/22/2017 22:55:37
推 shadowjohn: 那張a圖也要放上來啊... 01/22 23:07
※ 編輯: lcy17 (220.135.167.174), 01/22/2017 23:22:29