作者minejel (夢幻泡影)
看板Web_Design
標題Re: [請益] 簡單圖片翻轉問題
時間Wed Jan 25 07:04:10 2017
※ 引述《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="
https://pbs.twimg.com/media/Ci2x-nJUkAE5JH4.jpg">
<img class="pic1 box" src="
https://chivethebrigade.files.wordpress.com/2011/11/cowboy-cheer-500-26.jpg">
</div>
</div>
</body>
--
拍的到的是鬼神,摸不透的是人心
換個角度看世界,生活才會更美好
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 114.35.102.48
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Web_Design/M.1485299055.A.345.html
1F：推 lcy17: 謝謝！！！確認後就會送上小小心意 01/26 01:28