為什么我的只能圖片一面鏡像變換，而不是跳到photo_back面??？
? ? .photo-wrap{
? ? ? position: absolute;
? ? ? width: 100%;
? ? ? height: 100%;
? ? ? -webkit-transform-style:perserve-3d;
? ? ? -webkit -transition:all .6s;
? ? }
? ? .photo-wrap .side-front{
? ? ? -webkit-transform:rotateY(0deg);
? ? }
? ? .photo-wrap .side-back{
? ? ? -webkit-transform:rotateY(180deg);
? ? }
? ? .photo-wrap .side{
? ? ? -webkit-backface-visibility:hidden;
? ? }
? ? .photo_front .photo-wrap{
? ? ? -webkit-transform:rotateY(0deg);
? ? }
? ? .photo_back .photo-wrap{
? ? ? -webkit-transform:rotateY(180deg);
? ? }
? </style>
?</head>
?<body onselectstart="return false;">
? <div class="wrap">
? <div class="photo photo_center photo_front" onclick="turn(this)">
? ? ? <!--負責翻轉的div-->
? ? ? <div class="photo-wrap">
? ? <div class="side side-front">
? ? ? <p class="image"><img src="p1.jpg"></p>
? ? ? <p class="caption">小白人</p>
? ? ? </div>
? ? ? ? <div class="side side-back">
? ? ? <p class="desc">描述信息</p>
? ? ? ? </div>
? ? ? </div>
? </div>
? </div>
? <script type="text/javascript">
? ? //1.翻面控制
? ? function turn (elem){
? ? ? var cls = elem.className;
? ? ? if (/photo_front/.test(cls)) {
? ? ? ? cls = cls.replace(/photo_front/,'photo_back')
? ? ? }else{
? ? ? ? cls = cls.replace(/photo_back/,'photo_front')
? ? ? }
? ? ? return elem.className = cls;
? ? }
2015-05-14
用的也是google瀏覽器