作者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/cn.aspx?n=bbs/Web_Design/M.1485299055.A.345.html
1F：推 lcy17: 谢谢！！！确认後就会送上小小心意 01/26 01:28