问答详情
源自：2-3 3D效果编写

我怎么没有三D效果啊 反转比如哦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>海报画廊</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>

提问者：Freen247 2017-03-27 15:17

个回答

  • 慕侠2155777
    2019-01-02 15:10:51

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

    0
  • Freen247
    2017-03-28 17:39:27

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

    0
  • 发现爱
    2017-03-28 17:05:16

    首先要用persperctive透视，  webkit-transform:perspective(800px);才能像你说的

    一边长一边短的立体效果

    要用JS控制或hover 伪类交互后，利用transition过渡才会看到慢慢变过来的效果

    0