2013-09-05css3制作的一个魔方

    您现在的位置是:首页 > 学无止境 > CSS3|Html5

    分享一个css3制作的魔方

    本应用由CSS3代码实现,无图片和flash,请使用Chrome等webkit内核浏览器或Firefox打开

    演示 下载

    破解攻略和大家分享下:

    首先,破解魔方,我们就要先了解它的结构,魔方共6色6面,每面又分为中央块(最中间的块6个)、角块(4角的块8个)和边块(4条边中间的块12个)。其中中央块只有1个面,他们是固定的结构,所以中央是红色的块,那么其他的红色都要向这个面集中。而且红色的中央块对面永远是橙色中央块(国际标准是这么规定的)。而边块有2个面2个颜色,角块则有3个面3个颜色。

    css3制作的一个魔方

    接下来我们将每个面都用字母代表,

    css3制作的一个魔方

    然后破解功略里会用字母来说明要转动的1层或1面,以及方向:例如:R(代表右面顺时针转90度),R`(代表右面逆时针转90度),R2(代表右面顺时针转2次90度)

    下面是图示:

    css3制作的一个魔方

    最后要说明的是:每面的名称是相对的,例如F是前面,就是手拿魔方时面向自己的一面,若把模仿旋转到另一面,那么就有新的一面成为前面。

    css3制作的一个魔方

    下面就让我们尝试下7步将魔方还原吧!

    1.先将中间是白色块的一面(有个rubiks logo的那块)对着上面,然后在顶部做出白十字,就是其他颜色的块都到相应的位置(小复杂,见图示,注意上面标的口诀哦,照做无误)

    css3制作的一个魔方

    2.然后是将白色的角块归位(秘籍说的很复杂,还是看图比较容易理解啦)

    css3制作的一个魔方

    3.然后让中层边块归位。

    把白色面转向下,找出红绿边块,若红绿边块在顶层则按顺时针方向转动顶层,直到边块与图上的1个情况相同,在按照口诀转动魔方,使边块归位。若红绿边块在中间某层,但位置错误或颜色错误,则先使红绿边块在右前方的位置,再重新按照下面其中一个次序旋转1次。

     css3制作的一个魔方

    4.然后将顶层(应该是黄色)边块调整向上,做出黄十字。若按照口诀转动1次后,顶层仍未出现黄色十字,可重复按口诀转动,直到黄色十字出现为止。

    css3制作的一个魔方

    5.然后将黄色角块调整到十字周围,有点难度,看口诀提示吧。

    css3制作的一个魔方

    6.通常这时候黄色块,和侧面的颜色会有错位产生,根据口诀(我还没吃透)将四角的黄色块定位。

    css3制作的一个魔方

    7.最后将边上的色块再调整到对应的位置。大功告成!!兴奋下。

    css3制作的一个魔方

    css3制作的一个魔方

关键字词:魔方,css3