稍微调整了下, 当然结构还可以更多层次, 主要运用了 CSS3 的 transform 3d, 不支持低端浏览器
html 代码片段
- <!doctype HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <title>
- 3D 立方体旋转动画
- </title>
- <style type="text/css">
- @keyframes rotate{ 0%{transform:rotateX(0deg) rotateY(0deg);} 100%{transform:rotateX(360deg)
- rotateY(360deg);} } @-webkit-keyframes rotate{ 0%{transform:rotateX(0deg)
- rotateY(0deg);} 100%{transform:rotateX(360deg) rotateY(360deg);} } HTML{background:linear-gradient(#ff0
- 0%,#3F9 80%);height:100%;} .wrap{margin:150px auto;perspective:1000px;width:200px;height:200px;}
- .cube{margin:auto;width:200px;height:200px;position:relative;transform-style:preserve-3d;animation:rotate
- 20s infinite linear;} .cube> div{width:100%;height:100%;position:absolute;background-color:#333;opacity:.9;border:1px
- solid #fff;color:#fff;font-size:36px;font-family:"微软雅黑";font-weight:bold;text-align:center;line-height:200px;transition:transform
- .2s ease-in;-webkit-transition:transform .2s ease-in;} .cube> span{display:block;width:100px;height:100px;border:1px
- solid #000;background-color:#999;position:absolute;top:50px;left:50px;}
- .cube> span img{width:100px;height:100px;} .cube .out-front{transform:translateZ(100px);-moz-transform:translateZ(100px);-webkit-transform:translateZ(100px);}
- .cube .out-back{transform:translateZ(-100px) rotateY(180deg);-moz-transform:translateZ(-100px)
- rotateY(180deg);-webkit-transform:translateZ(-100px) rotateY(180deg)} .cube
- .out-left{transform:translateX(-100px) rotateY(-90deg);-moz-transform:translateX(-100px)
- rotateY(-90deg);-webkit-transform:translateX(-100px) rotateY(-90deg);}
- .cube .out-right{transform:translateX(100px) rotateY(90deg);-moz-transform:translateX(100px)
- rotateY(90deg);-webkit-transform:translateX(100px) rotateY(90deg);} .cube
- .out-top{transform:translateY(-100px) rotateX(90deg);-moz-transform:translateY(-100px)
- rotateX(90deg);-webkit-transform:translateY(-100px) rotateX(90deg);} .cube
- .out-bottom{transform:translateY(100px) rotateX(-90deg);-moz-transform:translateY(100px)
- rotateX(-90deg);-webkit-transform:translateY(100px) rotateX(-90deg);} .cube
- .in-front{transform:translateZ(50px);-moz-transform:translateZ(50px);-webkit-transform:translateZ(50px);}
- .cube .in-back{transform:translateZ(-50px) rotateY(180deg);-moz-transform:translateZ(-50px)
- rotateY(180deg);-webkit-transform:translateZ(-50px) rotateY(180deg)} .cube
- .in-left{transform:translateX(-50px) rotateY(-90deg);-moz-transform:translateX(-50px)
- rotateY(-90deg);-webkit-transform:translateX(-50px) rotateY(-90deg);} .cube
- .in-right{transform:translateX(50px) rotateY(90deg);-moz-transform:translateX(50px)
- rotateY(90deg);-webkit-transform:translateX(50px) rotateY(90deg);} .cube
- .in-top{transform:translateY(-50px) rotateX(90deg);-moz-transform:translateY(-50px)
- rotateX(90deg);-webkit-transform:translateY(-50px) rotateX(90deg);} .cube
- .in-bottom{transform:translateY(50px) rotateX(-90deg);-moz-transform:translateY(50px)
- rotateX(-90deg);-webkit-transform:translateY(50px) rotateX(-90deg);} .wrap:hover
- .cube .out-front{transform:translateZ(200px);-moz-transform:translateZ(200px);-webkit-transform:translateZ(200px);}
- .wrap:hover .cube .out-back{transform:translateZ(-200px) rotateY(180deg);-moz-transform:translateZ(-200px)
- rotateY(180deg);-webkit-transform:translateZ(-200px) rotateY(180deg)} .wrap:hover
- .cube .out-left{transform:translateX(-200px) rotateY(-90deg);-moz-transform:translateX(-200px)
- rotateY(-90deg);-webkit-transform:translateX(-200px) rotateY(-90deg);}
- .wrap:hover .cube .out-right{transform:translateX(200px) rotateY(90deg);-moz-transform:translateX(200px)
- rotateY(90deg);-webkit-transform:translateX(200px) rotateY(90deg);} .wrap:hover
- .cube .out-top{transform:translateY(-200px) rotateX(90deg);-moz-transform:translateY(-200px)
- rotateX(90deg);-webkit-transform:translateY(-200px) rotateX(90deg);} .wrap:hover
- .cube .out-bottom{transform:translateY(200px) rotateX(-90deg);-moz-transform:translateY(200px)
- rotateX(-90deg);-webkit-transform:translateY(200px) rotateX(-90deg);}
- </style>
- </head>
- <body>
- <div class="wrap">
- <div class="cube">
- <div class="out-front">
- <img src="http://img.hoop8.com/attachments/1602/6421919920043.jpg">
- </div>
- <div class="out-back">
- <img src="http://img.hoop8.com/attachments/1602/6821919920043.jpg">
- </div>
- <div class="out-left">
- <img src="http://img.hoop8.com/attachments/1602/7231919920043.jpg">
- </div>
- <div class="out-right">
- <img src="http://img.hoop8.com/attachments/1602/7591919920043.jpg">
- </div>
- <div class="out-top">
- <img src="http://img.hoop8.com/attachments/1602/8111919920043.jpg">
- </div>
- <div class="out-bottom">
- <img src="http://img.hoop8.com/attachments/1602/8551919920043.jpg">
- </div>
- <span class="in-front">
- <img src="http://img.hoop8.com/attachments/1602/6421919920043.jpg">
- </span>
- <span class="in-back">
- <img src="http://img.hoop8.com/attachments/1602/6821919920043.jpg">
- </span>
- <span class="in-left">
- <img src="http://img.hoop8.com/attachments/1602/7231919920043.jpg">
- </span>
- <span class="in-right">
- <img src="http://img.hoop8.com/attachments/1602/7591919920043.jpg">
- </span>
- <span class="in-top">
- <img src="http://img.hoop8.com/attachments/1602/8111919920043.jpg">
- </span>
- <span class="in-bottom">
- <img src="http://img.hoop8.com/attachments/1602/8551919920043.jpg">
- </span>
- </div>
- </div>
- </body>
- </HTML>
来源: http://www.qdfuns.com/article/20614/7556a7d203b71daa3170b66d7bd005e5.html