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="images/slogan01_2.png" />
            </div>
            <div class="side-back">
                <img src="images/slogan01.png" />
               
            </div>
        </div>
</div>

View Code