                        課程
                    
                        /前端開發(fā)
                        
                            /HTML/CSS
                        
                        /CSS3+JS 實(shí)現(xiàn)超炫的散列畫廊特效

我怎么沒有三D效果啊反轉(zhuǎn)比如哦100度沒有一邊長一邊短的立體效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
?? ?<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
?? ?<title>海報(bào)畫廊</title>
?? ?<style type="text/css">
?? ?*{padding:0;margin:0;}
?? ?body{background-color:#fff;
?? ??? ?color:#555;font-family:
?? ??? ? 'Avenir Next','Lantinghei SC';
?? ??? ? font-size: 14px;
?? ??? ? -webkit-font-smoothing:antialiased;
?? ?}
?? ?
?? ?
?? ?.photo{
?? ??? ?width:260px;
?? ??? ?height:320px;
?? ??? ?position: absolute;
?? ??? ?z-index: 1;
?? ??? ?box-shadow: 0 0 1px rgba(0,0,0,.01);
?? ?}
?? ?.photo .side{
?? ??? ?width:100%;
?? ??? ?height:100%;
?? ??? ?background: #eee;
?? ??? ?position: absolute;
?? ??? ?top:0;
?? ??? ?right:0;
?? ??? ?padding: 20px;
?? ??? ?box-sizing: border-box;
?? ?}
?? ?.photo .side-font{}
?? ?.photo .side-font .image{
?? ??? ?width: 100%;
?? ??? ?height: 250px;
?? ??? ?line-height: 250px;
?? ??? ?overflow:hidden;
?? ?}
?? ?.photo .side-font .image img{
?? ??? ?widows: 100%;
?? ?}
?? ?.photo .side-font .caption{
?? ??? ?text-align: center;
?? ??? ?font-size: 16px;
?? ??? ?line-height: 50px;
?? ?}?? ?
?? ?.photo .side-back{
?? ??? ?color:#666;
?? ??? ?font-size:14px;
?? ??? ?line-height: 1.5em;
?? ?}
?? ?.photo_center{
?? ??? ?left:50%;
?? ??? ?top:50%;
?? ??? ?margin:-160px 0 0 -130px;
?? ??? ?z-index: 99;
?? ?}
?? ?.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: 100%;
?? ??? ?-webkit-transform-style:preserve-3d;
?? ?}
?? ?.photo-wrap .side-font{
?? ??? ?-webkit-transform:rotateY(0deg);
?? ?}
?? ?.photo-wrap .side-back{
?? ??? ?-webkit-transform:rotateY(180deg);
?? ?}
?? ?.photo-wrap .side{
?? ??? ?-webkit-backface-visibility:hidden;
?? ?}
?? ?.photo_font .photo-wrap{
?? ??? ?-webkit-transform:rotateY(0deg);

?? ?}
?? ?.photo_back .photo-wrap{
?? ??? ?-webkit-transform:rotateY(180deg);

?? ?}
</style>
</head>
<body oneselectstart="return false;">
?? ?<div>
?? ??? ?<div class="photo photo_center photo_back photo_font">
?? ??? ??? ?<div >
?? ??? ??? ??? ?<div class="side side-font">
?? ??? ??? ??? ??? ?<p><img src="1 超能陸戰(zhàn)隊(duì).jpg" style="width:240px;"/></p>
?? ??? ??? ??? ??? ?<p>超能陸戰(zhàn)隊(duì)</p>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div class="side side-back">
?? ??? ??? ??? ??? ?<p>描述信息</p>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</div>
</body>
</html>