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样式，按老师的作业做了一个魔方！
css3-魔方
原文地址：http://www.cnblogs.com/1986river/p/7471163.html