首先上效果图：
是不是很炫呢！
没有？
好吧！只能发个大招了，来看下动态的效果吧
/media/395929464
效果还算可以吧，相信只要你用心，你会做出更炫的效果。把你们的生活点滴记录在上面，你的他/她肯定会非常感动的。
好了，是不是已经迫及待的想看看到底是怎么实现的了！
下面先附上HTML的代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>爱的魔方</title><link rel="stylesheet" type="text/css" href="Rubiks_Cube.css"></head><body><div class="main"><img src="img/bg.jpg" class="bgimg"><div class="stage"><div class="cube Ani-rotate"><div class="one"><div><img src="img/1-1.gif"></div><div><img src="img/1-2.gif"></div><div><img src="img/1-3.gif"></div><div><img src="img/1-4.gif"></div><div><img src="img/1-5.gif"></div><div><img src="img/1-6.gif"></div><div><img src="img/1-7.gif"></div><div><img src="img/1-8.gif"></div><div><img src="img/1-9.gif"></div></div><div class="two"><div><img src="img/2-1.gif"></div><div><img src="img/2-2.gif"></div><div><img src="img/2-3.gif"></div><div><img src="img/2-4.gif"></div><div><img src="img/2-5.gif"></div><div><img src="img/2-6.gif"></div><div><img src="img/2-7.gif"></div><div><img src="img/2-8.gif"></div><div><img src="img/2-9.gif"></div></div><div class="three"><div><img src="img/3-1.gif"></div><div><img src="img/3-2.gif"></div><div><img src="img/3-3.gif"></div><div><img src="img/3-4.gif"></div><div><img src="img/3-5.gif"></div><div><img src="img/3-6.gif"></div><div><img src="img/3-7.gif"></div><div><img src="img/3-8.gif"></div><div><img src="img/3-9.gif"></div></div><div class="four"><div><img src="img/4-1.gif"></div><div><img src="img/4-2.gif"></div><div><img src="img/4-3.gif"></div><div><img src="img/4-4.gif"></div><div><img src="img/4-5.gif"></div><div><img src="img/4-6.gif"></div><div><img src="img/4-7.gif"></div><div><img src="img/4-8.gif"></div><div><img src="img/4-9.gif"></div></div><div class="five"><div><img src="img/5-1.gif"></div><div><img src="img/5-2.gif"></div><div><img src="img/5-3.gif"></div><div><img src="img/5-4.gif"></div><div><img src="img/5-5.gif"></div><div><img src="img/5-6.gif"></div><div><img src="img/5-7.gif"></div><div><img src="img/5-8.gif"></div><div><img src="img/5-9.gif"></div></div><div class="six"><div><img src="img/6-1.gif"></div><div><img src="img/6-2.gif"></div><div><img src="img/6-3.gif"></div><div><img src="img/6-4.gif"></div><div><img src="img/6-5.gif"></div><div><img src="img/6-6.gif"></div><div><img src="img/6-7.gif"></div><div><img src="img/6-8.gif"></div><div><img src="img/6-9.gif"></div></div></div></div></div></body></html>
是不是感觉也并不难啊。
对啊，其实就是六个DIV组成了魔方的六个面，然后每个魔方上面放了九张图片。
就这样就简单的实现了魔方的简单架构。
是不是对CSS还没有头绪， 来看下面的CSS代码吧，也是很简单的。
/*定义图片大小*/img {width: 100px;height: 100px;}.main {position: absolute;width: 100%;height: 100%;z-index: -1}.bgimg {position: fixed;height: 100%;width: 100%;}.stage {width: 300px;height: 300px;margin: 200px auto 0 auto;}.cube div {width: 300px;height: 300px;position: absolute;/*border: 1px solid #00F;*//*background-color: rgba(255,200,100,0.5);*/display: block;border-radius: 5%;}/*通过转换X、Y、Z轴上的角度，实现魔方六个面的位置摆放*/.cube .one {-webkit-transform: translateZ(150px);-moz-transform: translateZ(150px);-ms-transform: translateZ(150px);transform: translateZ(150px);}.cube .two {-webkit-transform: rotateX(-90deg) translateZ(150px);-moz-transform: rotateX(-90deg) translateZ(150px);-ms-transform: rotateX(-90deg) translateZ(150px);transform: rotateX(-90deg) translateZ(150px);}.cube .three {-webkit-transform: rotateX(90deg) translateZ(150px);-moz-transform: rotateX(90deg) translateZ(150px);-ms-transform: rotateX(90deg) translateZ(150px);transform: rotateX(90deg) translateZ(150px);}.cube .four {-webkit-transform: rotateZ(180deg) rotateY(180deg) translateZ(150px);-moz-transform: rotateZ(180deg) rotateY(180deg) translateZ(150px);-ms-transform: rotateZ(180deg) rotateY(180deg) translateZ(150px);transform: rotateZ(180deg) rotateY(180deg) translateZ(150px);}.cube .five {-webkit-transform: rotateY(-90deg) translateZ(150px);-moz-transform: rotateY(-90deg) translateZ(150px);-ms-transform: rotateY(-90deg) translateZ(150px);transform: rotateY(-90deg) translateZ(150px);}.cube .six {-webkit-transform: rotateY(90deg) translateZ(150px);-moz-transform: rotateY(90deg) translateZ(150px);-ms-transform: rotateY(90deg) translateZ(150px);transform: rotateY(90deg) translateZ(150px);}.one div,.two div,.three div,.four div,.five div,.six div {width: 100px;height: 100px;position: absolute;/*border: 1px solid #000;*/border-radius: 10%;/*display: inline-block;*/}/*每张图片位置的确定*/.cube div div:nth-child(1) {}.cube div div:nth-child(2) {background-image: url(as.jpg);left: 100px;}.cube div div:nth-child(3) {/*background-color: #FF0000;*/left: 200px;}.cube div div:nth-child(4) {/*background-color: #FF6431;*/top: 100px;}.cube div div:nth-child(5) {/*background-color: #15FF31;*/top: 100px;left: 100px;}.cube div div:nth-child(6) {/*background-color: #1564FF;*/top: 100px;left: 200px;}.cube div div:nth-child(7) {/*background-color: #15F4F5;*/top: 200px;}.cube div div:nth-child(8) {/*background-color: #F56F89;*/top: 200px;left: 100px;}.cube div div:nth-child(9) {/*background-color: #1F644F;*/top: 200px;left: 200px;}/*最后最关键的旋转动画效果来了，感觉看着有些费劲建议看下CSS3的transform，animation属性*/.Ani-rotate {-webkit-transform-style: preserve-3d; /*开启3D视图，这样才能看到3D的效果*/-webkit-animation: rotate 30s infinite; /*设置动画，动画的名称，动画执行时间，动画执行次数*//*margin: 80px;*//*-webkit-perspective:2000px;*//*-webkit-perspective-origin: -133% 75%;;*/-webkit-transform-origin: 150px 150px 0px; /*旋转中心点，分别为 X、Y、Z轴上的位置*/-moz-transform-style: preserve-3d;/*下面是为了兼容更多浏览器*/-moz-animation: rotate 30s infinite;-moz-transform-origin: 150px 150px 0px;-ms-transform-style: preserve-3d;-ms-animation: rotate 30s infinite;-ms-transform-origin: 150px 150px 0px;animation: rotate 30s infinite;transform-style: preserve-3d;transform-origin: 150px 150px 0px;}/*下面是动画的定义，设置不同时间动画的不同状态rotateX、rotateY、rotateZ 为设置在X、Y、Z轴上旋转的角度"-"为逆时针旋转*/@-webkit-keyframes rotate {from,to {}15% {-webkit-transform: rotateY(-135deg);}30% {-webkit-transform: rotateY(-90deg)rotateZ(135deg); }45% {-webkit-transform: rotateY(225deg)rotateZ(135deg);}60% {-webkit-transform: rotateY(135deg)rotateX(135deg);}75% {-webkit-transform: rotateX(135deg)rotateY(225deg);}90% {-webkit-transform: rotateX(-135deg);}}@-moz-keyframes rotate {from,to {}15% {-moz-transform: rotateY(-135deg);}30% {-moz-transform: rotateY(-90deg)rotateZ(135deg);}45% {-moz-transform: rotateY(225deg)rotateZ(135deg);}60% {-moz-transform: rotateY(135deg)rotateX(135deg);}75% {-moz-transform: rotateX(135deg)rotateY(225deg);}90% {-moz-transform: rotateX(-135deg);}}@-ms-keyframes rotate {from,to {}15% {-ms-transform: rotateY(-135deg);}30% {-ms-transform: rotateY(-90deg)rotateZ(135deg);}45% {-ms-transform: rotateY(225deg)rotateZ(135deg);}60% {-ms-transform: rotateY(135deg)rotateX(135deg);}75% {-ms-transform: rotateX(135deg)rotateY(225deg);}90% {-ms-transform: rotateX(-135deg);}}@keyframes rotate {from,to {}15% {transform: rotateY(-135deg);}30% {transform: rotateY(-90deg)rotateZ(135deg);}45% {transform: rotateY(225deg)rotateZ(135deg);}60% {transform: rotateY(135deg)rotateX(135deg);}75% {transform: rotateX(135deg)rotateY(225deg);}90% {transform: rotateX(-135deg);}}
对于不了解CSS3中的 transform，animation属性的童鞋估计看着多少还是有点迷糊的， 建议稍微了解下 transform，animation 你就犹如恍然大悟，发现原来做这样一个魔方这么简单啊！ 希望你们都能做出更炫酷的效果，给你的他/她一个大大的惊喜。
