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>

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)")
               
            })
        })

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

 

 

----->

参考效果

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