作者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://webptt.com/cn.aspx?n=bbs/Web_Design/M.1485014899.A.300.html
1F：→ nohara001: a图是…………… 01/22 10:29
2F：→ lcy17: 哈哈 是代号而已啦a翻牌後换b图 类似扑克牌那样 01/22 12:10
3F：→ lcy17: 难道是因为有误会才没人帮忙吗QQ 01/22 12:10
4F：→ Ammenze: 你的code不放上来，谁能回答你 01/22 13:31
※ 编辑: lcy17 (220.135.167.174), 01/22/2017 22:55:37
5F：推 shadowjohn: 那张a图也要放上来啊... 01/22 23:07
※ 编辑: lcy17 (220.135.167.174), 01/22/2017 23:22:29