1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>魔方</title> 6 <style type="text/css"> 7 section{width: 100px;height:100px;border:5px solid red; margin:50px auto;padding:100px;perspective: 800px;} 8 .box {width:100px;height:100px;position:relative; 9 transform-style:preserve-3d; 10 transition:4S; 11 transform-origin:center center -50px; 12 } 13 .box div{width: 100px;height:100px;position:absolute;color:white;font-size:50px;text-align: center;line-height:100px;} 14 .box div:nth-of-type(1){ 15 background: #FF6600;; 16 transform:translateX(-100px) rotateY(-90deg); 17 transform-origin:right; 18 } 19 .box div:nth-of-type(2){ 20 background:red ; 21 transform:translateY(-100px) rotateX(90deg); 22 transform-origin:bottom ; 23 24 } 25 .box div:nth-of-type(3){ 26 background:darkviolet; 27 transform:translateX(100px) rotateY(90deg); 28 transform-origin:left; 29 } 30 .box div:nth-of-type(4){ 31 background:yellow; 32 transform: translateY(100px) rotateX(-90deg) ; 33 transform-origin:top; 34 } 35 .box div:nth-of-type(5){ 36 background:green; 37 transform:translateZ(-100px) rotateY(180deg); 38 39 } 40 .box div:nth-of-type(6){ 41 background:blue; 42 } 43 section:hover .box{ 44 transform: rotateX(270deg) rotateY(-270deg) rotateX(-270deg) rotateY(270deg) ; 45 46 } 47 </style> 48 </head> 49 <body> 50 <section> 51 <div class="box"> 52 <div>1</div> 53 <div>2</div> 54 <div>3</div> 55 <div>4</div> 56 <div>5</div> 57 <div>6</div> 58 </div> 59 </section> 60 </body> 61 </html>
这两天在学习HTML5+CSS3样式，按老师的作业做了一个魔方！
原文：http://www.cnblogs.com/1986river/p/7471163.html