Html
    Css
    Js

    
                        
  * {
        margin: 0;
        padding: 0;
    }
    
    body {
        background-color: #000;
        color: #ccc;
        cursor: pointer;
    }
    
    .stage {
        width: 800px;
        height: 400px;
        border: 1px solid #000;
        margin: 0 auto;
        perspective: 900px;
    }
    
    .stage .actor {
        width: 800px;
        height: 400px;
        position: relative;
        transform-style: preserve-3d;
        transition: all 1s ease 0s;
    }
    
    .stage .actor ul {
        list-style: none;
    }
    
    .stage .actor ul li {
        position: absolute;
        left: 300px;
        top: 100px;
    }
    
    .stage .actor ul li img {
        width: 220px;
        height: 250px;
        /*倒影设置*/
        -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5) 100%);
    }

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

3d环绕效果图

3d环绕css3效果图   有注释,简单易懂

0