css3翻牌效果

原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面

然后通过有过渡(transition)效果的改变rotate值

Dom

<div class="main">
<div class="photo-wrap">
<div class="side-front">
<img src="data:images/slogan01_2.png" />
</div>
<div class="side-back">
<img src="data:images/slogan01.png" /> </div>
</div>
</div>

css

.photo-wrap {
width: 170px;
margin: 50px auto 0;
position: relative;
-webkit-transform: rotateY(0deg);
-webkit-transform-style: preserve-3d; /*让其下一级子元素拥有3D效果,背面隐藏效果。如果没有该属性子元素-webkit-backface-visibility: hidden;无效*/
transition: all 0.9s ease-in;
transform-origin: 50% 50%;
}
.photo-wrap.wrap_back {
-webkit-transform: rotateY(180deg);
}
.side-front {
position: absolute;
left: 0px;
top: 0px;
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(0deg);
}
.side-back {
position: absolute;
left: 0px;
top: 0px;
-webkit-backface-visibility: hidden;
-webkit-transform: rotateY(180deg);
}
.side {
-webkit-backface-visibility: hidden;
}

js

$(function () {
var _deg = 0;
$(".photo-wrap").on("click", function () { _deg += 180;
$(this).css("-webkit-transform", "rotateY(" + (_deg) + "deg)") })
})

最后点击就会看到元素有正面到反面的翻转了。

css3翻牌效果----->css3翻牌效果

参考效果

http://utlcenter.com:8007/fanzhuan/index.html

上一篇:django之创建第12个项目-加载图片


下一篇:JavaWeb学习 (十二)————使用Session防止表单重复提交