                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /CSS3+JS 实现超炫的散列画廊特效

为什么我的没有翻转？

.wrap{
       width:100%;
       height: 600px;
       position: absolute;
       top: 50%;
       margin-top: -300px;
       background:#333;
       overflow: hidden;
       -webkit-perspective:800px;
   }
   .photo-wrap{
       position: absolute;
       width:100%;
       height: 100px;
       -webkit-transform-style:preserve-3d;
   }
   .photo-wrap .side-font{
       transform:rotateY(0deg);
   }
   .photo-wrap .side-back{
       transform:rotateY(180deg);
   }
</style>
</head>
<body oneselectstart="return false;">
   <div class="wrap">
       <div class="photo photo_center">
           <div calss="photo-wrap">
               <div class="side side-font">
                   <p class="image"><img src="1 超能陆战队.jpg" style="width:240px;"/></p>
                   <p class="caption">超能陆战队</p>
               </div>
               <div class="side side-back">
                   <p class="desc">描述信息</p>