魔方案例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143

<div class="wrap">         <div class="box box1">             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>         </div>         <div class="box box2">             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>         </div>         <div class="box box3">             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>         </div>         <div class="box box4">             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>         </div>         <div class="box box5">             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>         </div>         <div class="box box6">             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>             <div></div>         </div>     </div>     </body>     <style>         .wrap{             position: relative;             transform-style: preserve-3d;             transform-origin: center center;             transform: rotateX(-30deg) rotateY(-80deg);             width: 198px;             height: 198px;             margin: 200px auto;         }         .wrap:hover{             animation: myfirst 8s;         }         @keyframes myfirst         {             0%   {transform: rotateX(-30deg) rotateY(-80deg);}             25%  {transform: rotateX(360deg) rotateY(-120deg);}             50%  {transform: rotateY(-30deg) rotateY(-60deg);}             100% {transform: rotateY(-360deg) rotateY(-80deg);}         }         .box{             position: absolute;             left: 0;             top: 0;             width: 198px;             height: 198px;         }         .box div{             float: left;             width: 60px;             height: 60px;             background-color: red;             border: solid 1px #666;             margin: 2px;             box-shadow: 0 1px 2px rgba(0,0,0, 0.3);             border-radius: 5px;         }         .box1{             transform: rotateY(90deg) translateZ(99px);         }         .box1>div{             background-color: red;         }         .box2{             transform: rotateY(90deg) translateZ(-99px);         }         .box2>div{             background-color: green;         }         .box3{             transform: rotateX(90deg) translateZ(99px);         }         .box3>div{             background-color: blue;         }         .box4{             transform: rotateX(90deg) translateZ(-99px);         }         .box4>div{             background-color: yellow;         }         .box5{             transform: rotateX(0deg) translateZ(-99px);         }         .box5>div{             background-color: palegreen;         }         .box6{             transform: rotateX(0deg) translateZ(99px);         }         .box6>div{             background-color: aqua;         }     </style>