css3 3D盒子效果 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title></title>
  6         <style>
  7             body{
  8                 margin: 0;
  9             }
 10             ul{
 11                 margin: 0;
 12                 padding: 0;
 13                 list-style: none;
 14             }
 15             .wrap{
 16                 width: 198px;
 17                 height: 198px;
 18                 padding: 198px;
 19                 border: 1px solid black;
 20                 margin: 200px auto;
 21                 perspective: 300px;
 22             }
 23             .wrap ul{
 24                 width: 198px;
 25                 height: 198px;
 26                 position: relative;
 27                 transition: 10s;
 28                 transform-style: preserve-3d;
 29                 transform-origin: center center -99px;
 30             }
 31             .wrap ul li{
 32                 width: 198px;
 33                 height: 198px;
 34                 position: absolute;
 35                 font: 50px/100px "微软雅黑";
 36                 text-align: center;
 37                 color: #fff;
 38                 background-image: url(bg.jpg);
 39                 background-repeat: no-repeat;
 40             }
 41             .wrap ul li:nth-of-type(1){
 42                 background-color: red;
 43                 left: 0;
 44                 top: -198px;
 45                 transform-origin: bottom;
 46                 transform: rotateX(90deg);
 47                 background-position: -393px -393px;
 48             }
 49             .wrap ul li:nth-of-type(2){
 50                 background-color: yellow;
 51                 left: -198px;
 52                 top: 0;
 53                 transform-origin: right;
 54                 transform: rotateY(-90deg);
 55                 background-position: 0 -198px;
 56             }
 57             .wrap ul li:nth-of-type(3){
 58                 background-color: blue;
 59                 left: 0;
 60                 top: 0;
 61                 transform: translateZ(0px);
 62                 background-position: -197px -196px;
 63             }
 64             .wrap ul li:nth-of-type(4){
 65                 background-color: green;
 66                 left: 198px;
 67                 top: 0;
 68                 transform-origin: left;
 69                 transform: rotateY(90deg);
 70                 background-position: -393px -196px;
 71             }
 72             .wrap ul li:nth-of-type(5){
 73                 background-color: pink;
 74                 left: 0;
 75                 top: 198px;
 76                 transform-origin: top;
 77                 transform: rotateX(-90deg);
 78                 background-position: -589px -196px;
 79             }
 80             .wrap ul li:nth-of-type(6){
 81                 background-color: purple;
 82                 left: 0;
 83                 top: 0;
 84                 transform: translateZ(-198px);
 85                 background-position: -393px 0;
 86             }
 87             .wrap:hover ul{
 88                 transform:rotateX(720deg) rotateY(720deg) rotateZ(720deg);
 89             }
 90         </style>
 91     </head>
 92     <body>
 93         <div class="wrap">
 94             <ul>
 95                 <li>1</li>
 96                 <li>2</li>
 97                 <li>3</li>
 98                 <li>4</li>
 99                 <li>5</li>
100                 <li>6</li>
101             </ul>
102         </div>
103     </body>
104 </html>

效果图：

posted @ 2016-05-07 00:37  待繁华落尽  阅读(380)  评论(0)  编辑  收藏  举报