我怎么没有三D效果啊反转比如哦100度没有一边长一边短的立体效果-慕课网

我怎么没有三D效果啊反转比如哦100度没有一边长一边短的立体效果

来源：2-3 3D效果编写

Freen247

2017-03-27 15:17

<!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>海报画廊</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 超能陆战队.jpg" style="width:240px;"/></p>
                   <p>超能陆战队</p>
               </div>
               <div class="side side-back">
                   <p>描述信息</p>
               </div>
           </div>
       </div>
   </div>
</body>
</html>

写回答关注

3回答

慕侠2155777

2019-01-02 15:10:51

-webkit-perspective: 800px; 值越小，你要的效果立体越强越大，根据自己的图片大小感觉会越真实，具体情况自己看这写

0 0
Freen247

2017-03-28 17:39:27

webkit-transform:perspective(800px)这个写了啊

0 0
发现爱

2017-03-28 17:05:16

首先要用persperctive透视， webkit-transform:perspective(800px);才能像你说的
一边长一边短的立体效果
要用JS控制或hover 伪类交互后，利用transition过渡才会看到慢慢变过来的效果

0 0