zoukankan      html  css  js  c++  java
  • 3D立体照片墙

    代码如下:
     
     
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>3D立体照片墙</title>
        <style>
            /*
               transform顺序:先写rotate再写tanslate
                图片相差角度不一样,两个之间的距离也不一样
            */
            *{
                margin: 0;
                padding: 0;
            }
            .picwall{
                margin: 100px 300px;
                transform-style: preserve-3d;/**/
                transform-origin: 140px 200px;
                animation: pics 10s linear infinite;
            }
            .d0{
                width: 280px;
                height: 400px;
                position: absolute;
                float: left;
            }
            .pic11{
                transform: rotateY(60deg) translateZ(260px);
            }
            .pic12{
                transform: rotateY(120deg) translateZ(260px);
            }
            .pic21{
                transform: rotateY(180deg) translateZ(260px);
            }
            .pic22{
                transform: rotateY(240deg) translateZ(260px);
            }
            .pic31{
                transform: rotateY(300deg) translateZ(260px);
            }
            .pic32{
                transform: rotateY(360deg) translateZ(260px);
            }
            @keyframes pics {
                0%{
                    transform: rotateY(0deg) ;
                /*rotate(0deg)*/
                }
                100%{
                    transform: rotateY(360deg) ;
                /*rotate(360deg)*/
                }
            }
    
        </style>
    </head>
    <body>
        <div class="picwall">
                <img  class="pic11  d0" src="../imgs/xch1.jpg" alt=""/>
                <img  class="pic12  d0" src="../imgs/xch2.jpg" alt=""/>
                <img  class="pic21 d0" src="../imgs/xch3.jpg" alt=""/>
                <img  class="pic22 d0" src="../imgs/xch4.jpg" alt=""/>
                <img  class="pic31 d0" src="../imgs/xch5.jpg" alt=""/>
                <img  class="pic32 d0" src="../imgs/xch6.jpg" alt=""/>
        </div>
    </body>
    </html>
     
  • 相关阅读:
    HDU 1348 Wall
    HDU 2202 最大三角形
    HDU 2215 Maple trees
    HDU 1147 Pick-up sticks
    HDU 1392 Surround the Trees
    风语时光
    HDU 1115 Lifting the Stone
    HDU 1086 You can Solve a Geometry Problem too
    HDU 2108 Shape of HDU
    HDU 3360 National Treasures
  • 原文地址:https://www.cnblogs.com/Hmin2199/p/5707367.html
Copyright © 2011-2022 走看看