3D旋转相册

来源：互联网发布：qq群淘宝客白菜软件编辑：程序博客网时间：2024/04/30 01:18
首先放上效果图：
使用3D效果，这样的效果是使用了C3，会有兼容性的问题，但是不需要再使用JS来就可以实现了这样的酷炫的效果
<!DOCTYPE html><html>     <head>           <meta charset="UTF-8">           <title></title>           <style type="text/css">                body{background: #06081B;                     perspective: 5000px;                }                .show{perspective: 5000px;                     -webkit-transform: rotateX(-45deg);                     -moz-transform: rotateX(-45deg);                     transform: rotateX(-45deg);                     transform-style: preserve-3d;                }                .box{                     position: relative;width: 150px;height: 250px;border: 1px solid red;                     margin: 300px auto;                     transform-style: preserve-3d;                      -webkit-animation: rotate1 10s linear infinite;                     -moz-animation: rotate1 10s linear infinite;                     animation: rotate1 10s linear infinite;                }                .box img{width: 150px;height: 250px;border: 1px solid #ccc;position: absolute;                     left: 0;top: 0;                     -webkit-box-reflect: below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));                }                .img1{                     -webkit-transform: translateZ(300px);                     -moz-transform: translateZ(300px);                     transform: translateZ(300px);                }                .img2{                     -webkit-transform:rotateY(36deg) translateZ(300px) ;                     -moz-transform:rotateY(36deg) translateZ(300px) ;                     transform:rotateY(36deg) translateZ(300px) ;                }                .img3{                     -webkit-transform:rotateY(72deg) translateZ(300px);                     -moz-transform:rotateY(72deg)g) translateZ(300px) ;                     transform:rotateY(72deg) (300px) ;                }                .img4{                     -webkit-transform: rotateY(108deg) translateZ(300px);                     -moz-transform:rotateY(108deg) translateZ(300px) ;                     transform:rotateY(108deg) translateZ(300px) ;                }                .img5{                     -webkit-transform: rotateY(144deg) translateZ(300px);                     -moz-transform:rotateY(144deg) translateZ(300px) ;                     transform:rotateY(144deg) translateZ(300px) ;                }                .img6{                     -webkit-transform:rotateY(180deg) translateZ(300px) ;                     -moz-transform:rotateY(180deg) translateZ(300px) ;                     transform:rotateY(180deg) translateZ(300px) ;                }                .img7{                     -webkit-transform:rotateY(216deg) translateZ(300px) ;                     -moz-transform:rotateY(216deg) translateZ(300px) ;                     transform: rotateY(216deg) translateZ(300px);                }                .img8{                     -webkit-transform:rotateY(252deg) translateZ(300px) ;                     -moz-transform:rotateY(252deg) translateZ(300px) ;                     transform:rotateY(252deg) translateZ(300px) ;                }                .img9{                     -webkit-transform:rotateY(288deg) translateZ(300px) ;                     -moz-transform:rotateY(288deg) translateZ(300px) ;                     transform:rotateY(288deg) translateZ(300px) ;                }                .img10{                     -webkit-transform:rotateY(324deg) translateZ(300px) ;                     -moz-transform:rotateY(324deg) translateZ(300px) ;                     transform:rotateY(324deg) translateZ(300px) ;                }                @-moz-keyframes rotate1{                     0%{                           -webkit-transform: rotateY(0deg);                           -moz-transform: rotateY(0deg);                           transform: rotateY(0deg);                     }                     100%{                           -webkit-transform: rotateY(360deg);                           -moz-transform: rotateY(360deg);                           transform: rotateY(360deg);                     }                }                @-webkit-keyframes rotate1{                     0%{                           -webkit-transform: rotateY(0deg);                           -moz-transform: rotateY(0deg);                           transform: rotateY(0deg);                     }                     100%{                           -webkit-transform: rotateY(360deg);                           -moz-transform: rotateY(360deg);                           transform: rotateY(360deg);                     }                }           </style>     </head>     <body>           <div class="show">                <div class="box">                     <img src="../../like/20140820172844_iLhQe.thumb.700_0.jpeg" class="img1"/>                     <img src="../../like/20140906134504_CLe2Y.jpeg" class="img2"/>                     <img src="../../like/20141001131204_adWcU.jpeg" class="img3" />                     <img src="../../like/20150501181600_vicVy.jpeg" class="img4" />                     <img src="../../like/162158189846.jpg" class="img5"/>                     <img src="../../like/20120709124556_kuWHA.thumb.600_0.jpeg" class="img6"/>                     <img src="../../like/1319168064367rxz7ck1jd8.jpg" class="img7" />                     <img src="../../like/1319168064367wttefa1aab_medium.jpg" class="img8" />                     <img src="../../like/13191680643674icin00ieq.jpg" class="img9" />                     <img src="../../like/20131109092318_aKsJs.jpeg" class="img10" />                <!-- <img src="../../like/13191680643674icin00ieq.jpg" class="img11"/>-->                </div>           </div>     </body></html>
0 0