SOURCE

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

<div class="main">
        <div class="photo-wrap">
            <div class="side-front">
                <img src="http://shihuo.hupucdn.com/jianding/20181011/w1152h1536_153923037510687.jpg?imageView2/0/w/600/h/600/interlace/1" />
            </div>
            <div class="side-back">
                <img src="http://shihuo.hupucdn.com/jianding/20181011/w1152h1536_153923037610053.jpg?imageView2/0/w/600/h/600/interlace/1" />
               
            </div>
        </div>
</div>

.photo-wrap {
            width: 170px;
            margin: 50px auto 0;
            position: relative;
           
            -webkit-transform-style: preserve-3d; /*让其下一级子元素拥有3D效果，背面隐藏效果。如果没有该属性子元素-webkit-backface-visibility: hidden;无效*/
            transition: all 0.9s ease-in;
            transform-origin: 50% 80%;
        }
        .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;
        }