css3翻牌效果
原理:通过css3属性-webkit-transform: rotate(0deg)与-webkit-transform: rotate(180deg)对2个元素设置正反面
然后通过有过渡(transition)效果的改变rotate值
Dom
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<div class="main"> <div class="photo-wrap"> <div class="side-front"> <img src="images/slogan01_2.png" /> </div> <div class="side-back"> <img src="images/slogan01.png" /> </div> </div> </div>
css
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
.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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
$(function () { var _deg = 0; $(".photo-wrap").on("click", function () { _deg += 180; $(this).css("-webkit-transform", "rotateY(" + (_deg) + "deg)") }) })
最后点击就会看到元素有正面到反面的翻转了。
参考效果
http://utlcenter.com:8007/fanzhuan/index.html