css3 3d 魔方

 

 

<style><!--
@charset "UTF-8"; * { margin: 0; padding: 0 } html,body{ width: 100%; height: 100%;
}
.container { text-align: center; margin: 50px auto; width: 200px;
}
.cube { transform-style: preserve-3d; -webkit-transform-origin: 54px 54px 54px; -moz-transform-origin: 54px 54px 54px; -ms-transform-origin: 54px 54px 54px; -o-transform-origin: 54px 54px 54px; transform-origin: 54px 54px 54px; -webkit-animation: cube ease-in-out 6s infinite forwards; -o-animation: cube ease-in-out 6s infinite forwards; animation: cube ease-in-out 6s infinite forwards;
} @keyframes cube { from, to {
} 16% { transform: rotatey(-90deg);
} 33% { transform: rotatey(-90deg) rotatez(135deg);
} 50% { transform: rotatey(225deg) rotatez(135deg);
} 66% { transform: rotatey(135deg) rotatex(135deg);
} 83% { transform: rotatex(135deg);
}
}
.page { width: 108px; height: 108px; position: absolute;
}
.page .row { width: 108px; height: 36px; float: left;
}
.page span { display: inline-block; width: 30px; height: 30px; border: 3px solid #000; border-radius: 5px;
}
.up { -webkit-transform: translateY(54px) rotateX(90deg); -moz-transform: translateY(54px) rotateX(90deg); -ms-transform: translateY(54px) rotateX(90deg); -o-transform: translateY(54px) rotateX(90deg); transform: translateY(54px) rotateX(90deg);
}
.down { -webkit-transform: translateY(-54px) rotateX(-90deg); -moz-transform: translateY(-54px) rotateX(-90deg); -ms-transform: translateY(-54px) rotateX(-90deg); -o-transform: translateY(-54px) rotateX(-90deg); transform: translateY(-54px) rotateX(-90deg);
}
.front { -webkit-transform: translateZ(54px); -moz-transform: translateZ(54px); -ms-transform: translateZ(54px); -o-transform: translateZ(54px); transform: translateZ(54px);
}
.back { -webkit-transform: translateZ(-54px); -moz-transform: translateZ(-54px); -ms-transform: translateZ(-54px); -o-transform: translateZ(-54px); transform: translateZ(-54px);
}
.left { -webkit-transform: translateX(-54px) rotateY(-90deg); -moz-transform: translateX(-54px) rotateY(-90deg); -ms-transform: translateX(-54px) rotateY(-90deg); -o-transform: translateX(-54px) rotateY(-90deg); transform: translateX(-54px) rotateY(-90deg);
}
.right { -webkit-transform: translateX(54px) rotateY(90deg); -moz-transform: translateX(54px) rotateY(90deg); -ms-transform: translateX(54px) rotateY(90deg); -o-transform: translateX(54px) rotateY(90deg); transform: translateX(54px) rotateY(90deg);
} span.white { background: white } span.yellow { background: yellow } span.blue { background: blue } span.green { background: green } span.orange { background: orange } span.red { background: red }
--></style>
<!-- 上黄下白 前蓝后绿 左橙右红 -->

<div id="container" class="container"> 
<div id="cube" class="cube"> 
<div id="up" class="page up"> 
<div class="row row1"><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span></div> 
<div class="row row2"><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span></div>
 <div class="row row3"><span class="yellow"></span><span class="yellow"></span><span class="yellow"></span></div>
 </div> 
<div id="down" class="page down"> 
<div class="row row1"><span class="white"></span><span class="white"></span><span class="white"></span></div> 
<div class="row row2"><span class="white"></span><span class="white"></span><span class="white"></span></div>
 <div class="row row3"><span class="white"></span><span class="white"></span><span class="white"></span></div> 
</div> 
<div id="front" class="page front"> 
<div class="row row1"><span class="blue"></span><span class="blue"></span><span class="blue"></span></div>
 <div class="row row2"><span class="blue"></span><span class="blue"></span><span class="blue"></span></div>
 <div class="row row3"><span class="blue"></span><span class="blue"></span><span class="blue"></span></div> 
</div> 
<div id="back" class="page back">
 <div class="row row1"><span class="green"></span><span class="green"></span><span class="green"></span></div>
 <div class="row row2"><span class="green"></span><span class="green"></span><span class="green"></span></div>
 <div class="row row3"><span class="green"></span><span class="green"></span><span class="green"></span></div> 
</div> 
<div id="left" class="page left">
 <div class="row row1"><span class="orange"></span><span class="orange"></span><span class="orange"></span></div>
 <div class="row row2"><span class="orange"></span><span class="orange"></span><span class="orange"></span></div>
 <div class="row row3"><span class="orange"></span><span class="orange"></span><span class="orange"></span></div>
 </div>
 <div id="right" class="page right"> 
<div class="row row1"><span class="red"></span><span class="red"></span><span class="red"></span></div> 
<div class="row row2"><span class="red"></span><span class="red"></span><span class="red"></span></div> 
<div class="row row3"><span class="red"></span><span class="red"></span><span class="red"></span></div> 
</div> 
</div> 
</div>