原理：通过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)")
})
})
最后点击就会看到元素有正面到反面的翻转了。
----->
参考效果