--------------------------------------
用css3的新属性来设置3D盒
子效果（chrome浏览器），
代码如下：
-------------------------------------
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>3D-box</title> 6 ????<style type="text/css"> 7 ????????*{ 8 ????????????margin:0; 9 ????????????padding:0;10 ????????????-webkit-user-select:none;11 ????????}12 ????????.wrap{13 ????????????width:100px;14 ????????????height:100px;15 ????????????padding:100px;16 ????????????border:5px solid black;17 ????????????margin:160px auto;18 ????????????-webkit-perspective:600px; //设置景深;19 ????????????-webkit-transform:scale(1); //缩放倍数;20 ????????}21 ????????.box{22 ????????????animation:change 6s linear infinite; //设置动画效果;23 ????????????width:100px;24 ????????????height:100px;25 ????????????position:relative;26 ????????????-webkit-transform-style:preserve-3d; //指定3D样式;27 ????????????transition:5s; //设置动画完成一次所用时间;28 ????????????-webkit-transform-origin:center center -50px; //设置旋转中心点;29 ????????}30 ????????.box div{31 ????????????width:100px;32 ????????????height:100px;33 ????????????position:absolute;34 ????????????color:black;35 ????????????font-family:"Courier New";36 ????????????font-size:60px;37 ????????????line-height:100px;38 ????????????text-align:center;39 ????????}40 ????????.box div:nth-of-type(1){41 ????????????left:0;42 ????????????top:-100px;43 ????????????background:red;44 ????????????-webkit-transform-origin:bottom; //旋转的轴;45 ????????????-webkit-transform:rotateX(90deg); //沿着x轴旋转90度;46 ????????}47 ????????.box div:nth-of-type(2){48 ????????????left:-100px;49 ????????????top:0;50 ????????????background:yellow;51 ????????????-webkit-transform-origin:right;52 ????????????-webkit-transform:rotateY(-90deg);53 ????????}54 ????????.box div:nth-of-type(3){55 ????????????left:0;56 ????????????top:0;57 ????????????background:blue;58 ????????}59 ????????.box div:nth-of-type(4){60 ????????????left:100px;61 ????????????top:0;62 ????????????background:green;63 ????????????-webkit-transform-origin:left;64 ????????????-webkit-transform:rotateY(90deg);65 ????????}66 ????????.box div:nth-of-type(5){67 ????????????left:0;68 ????????????top:100px;69 ????????????background:purple;70 ????????????-webkit-transform-origin:top;71 ????????????-webkit-transform:rotateX(-90deg);72 ????????}73 ????????.box div:nth-of-type(6){74 ????????????left:0;75 ????????????top:0;76 ????????????background:orange;77 ????????????-webkit-transform:translateZ(-100px) rotateY(180deg);78 ????????}79 ????????@keyframes change{ //设置每一段的的变化效果，80 ????????????25%{-webkit-transform:rotateY(180deg);}81 ????????????50%{-webkit-transform:rotateY(360deg);}82 ????????????75%{-webkit-transform:rotateX(180deg);}83 ????????????100%{-webkit-transform:rotateX(360deg);}84 ????????}85 ????</style>86 </head>87 <body>88 <div class="wrap">89 ????<div class="box">90 ????????<div>1</div>91 ????????<div>2</div>92 ????????<div>3</div>93 ????????<div>4</div>94 ????????<div>5</div>95 ????????<div>6</div>96 ????</div>97 </div>98 </body>99 </html>----------------------------------------
原理：利用十字型分别
折叠90度各边拼接成
3D的盒子；
-----------------over-----------------
感谢你的阅读；
css实现3D盒子效果
原文地址：http://www.cnblogs.com/qmdx00/p/7436308.html