css3.0 3d动画demo

来源：互联网发布：淘宝购物怎样查询物流编辑：程序博客网时间：2024/05/17 07:53

<html><head>    <title>正方体</title></head><body><div class="my3d">   <div id="pagegroup">       <div class="box" id="page1"><P>    间</P>            </div>    <div class="box" id="page2">        <P>   挥</P>      </div>    <div class="box" id="page3">        <P>    一</P>      </div>    <div class="box" id="page4">        <P>    指</P>      </div>    <div class="box" id="page5">                  <P>    弹</P>      </div>      </div> </div><div class="my3d"></div></body></html>

.my3d{margin: 20px;width: 1210px;height: 210px;-webkit-perspective:800;-webkit-perspective-origin:50% 50%;}#pagegroup{-webkit-transform-style:preserve-3d;    position: relative;    -webkit-transform-origin:bottom;          -webkit-transform-origin:50%;}.box{opacity:.95;//透明度    width: 200px;    height: 200px;    margin: 10px;    -webkit-transition:all,2s;   Float:right;//横向排列   -webkit-transform-style:preserve-3d;   -webkit-animation:z 15s linear infinite;    -webkit-transform-origin:bottom;    box-shadow:1px 6px 12px rgba(0,0,0,0.3);    border-radius: 10px;//圆角     background-image:linear-gradient(to top left,#f2c,#699);                     }@-webkit-keyframes z{        0%{-webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(60deg) translateZ(0px);}       100%{-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateZ(0px);}}               p{                 text-align:center;            color:#ffF;    font-size:48px;   font-family: 'Fruktur', cursive;  text-shadow:                  1px  1px 1px #ccc,                  0 0 10px #fff,                  0 0 20px #fff,                  0 0 30px #fff,                  0 0 40px #ff00de,                  0 0 70px #ff00de,                  0 0 80px #ff00de,                  0 0 100px #ff00de,                  0 0 150px #fcf        }

0 0