CSS3动画 3DBOX

先看个效果图羡慕

  1 <!DOCTYPE html>
  2 <html>
  3 <head>
  4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5     <title>旋转盒子</title>
  6     <meta charset="utf-8" />
  7     <style>
  8         * {
  9             margin: 0px;
 10             padding: 0px;
 11         }
 12         @keyframes box {
 13             100% {
 14                 transform: rotate3d(100,100,100,360deg);
 15             }
 16         }
 17         #box {
 18             position: absolute;
 19             top: 30%;
 20             left: 50%;
 21             /*position:relative;*/
 22             perspective: 2000px;
 23             perspective-origin: 500px -300px;
 24             animation: box 5s linear 7s infinite both;
 25             transform-style: preserve-3d;
 26         }
 27         .item {
 28             position: absolute;
 29             border: 1px solid #000000;
 30             opacity: 0.5;
 31             width: 200px;
 32             height: 200px;
 33             font-size: 100px;
 34             background-color: #7b8efb;
 35             text-align: center;
 36             line-height: 200px;
 37         }
 38         @keyframes box1 {
 39             100% {
 40                 transform: rotateY(-90deg);
 41             }
 42         }
 43         #box1 {
 44             z-index: 6;
 45             transform-origin: left;
 46             animation: box1 1s linear 1s both;
 47         }
 48         @keyframes box2 {
 49             100% {
 50                 transform: rotateY(90deg);
 51             }
 52         }
 53         #box2 {
 54             z-index: 5;
 55             transform-origin: right;
 56             animation: box2 1s linear 2s both;
 57         }
 58         @keyframes box3 {
 59             100% {
 60                 transform: rotateX(90deg);
 61             }
 62         }
 63         #box3 {
 64             z-index: 4;
 65             transform-origin: top;
 66             animation: box3 1s linear 3s both;
 67         }
 68         @keyframes box4 {
 69             100% {
 70                 transform: rotateX(-90deg);
 71             }
 72         }
 73         #box4 {
 74             z-index: 3;
 75             transform-origin: bottom;
 76             animation: box4 1s linear 4s both;
 77         }
 78         @keyframes box5 {
 79             100% {
 80                 transform: translateZ(200px);
 81             }
 82         }
 83         #box5 {
 84             z-index: 2;
 85             animation: box5 1s linear 5s both;
 86         }
 87         @keyframes box6 {
 88             100% {
 89                 transform: rotateY(180deg);
 90             }
 91         }
 92         #box6 {
 93             animation: box6 1s linear 6s both;
 94         }
 95     </style>
 96 </head>
 97 <body>
 98     <div id="box">
 99         <div class="item" id="box1">1</div>
100         <div class="item" id="box2">2</div>
101         <div class="item" id="box3">3</div>
102         <div class="item" id="box4">4</div>
103         <div class="item" id="box5">5</div>
104         <div class="item" id="box6">6</div>
105     </div>
106 </body>
107 </html>

 

posted on 2017-02-08 12:34  cxd1008  阅读(175)  评论(0)  编辑  收藏  举报