Re: [請益] 簡單圖片翻轉問題

看板Web_Design作者minejel (夢幻泡影)時間8年前 (2017/01/25 07:04)推噓1(1推 0噓 0→)

留言1則, 1人參與討論串2/2 (看更多)

※ 引述《lcy17 (Aoie)》之銘言： : 我最近才剛學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> <style> /*pic1 翻轉後變成 pic2*/ .contain{ perspective: 2500px ; transform-style: preserve-3d ; } .box{ top:0; left:0; position:absolute; width: 400px; height: 400px; } .pic2{ transform: rotateY(-180deg) ; -webkit-transform: rotateY(-180deg); z-index:1; } .pic1{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg) ; backface-visibility: hidden; -webkit-backface-visibility:hidden; z-index: 2; } .wrap:hover .pic1 { transform: rotateY(180deg) ; -webkit-transform: rotateY(180deg); transition:2s ; } .wrap:hover .pic2 { transform: rotateY(0deg) ; -webkit-transform: rotateY(0deg); transition:2s ; } </style> <body> <div class="contain"> <div class="wrap"> <img class="pic2 box" src="" rel="nofollow">https://pbs.twimg.com/media/Ci2x-nJUkAE5JH4.jpg"> <img class="pic1 box" src="" rel="nofollow">https://chivethebrigade.files.wordpress.com/2011/11/cowboy-cheer-500-26.jpg"> </div> </div> </body> -- 拍的到的是鬼神,摸不透的是人心換個角度看世界,生活才會更美好　　 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.35.102.48 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1485299055.A.345.html