魔方java3d,CSS3 制作魔方 - 相关立体样式

最好的实践，就是给定一个实践的目标去实践。

目标：利用 CSS3 的一些特性，绘制一个魔方，要可以玩转的那种，即上下左右每一层都可以独立旋转。效果如下：

为了完成此效果，将使用到以下相关概念和样式：坐标、3D呈现、平移、旋转。

(1)坐标

屏幕的起点坐标是(0,0,0)，往右递增为 x 方向，使用 left 属性表示，往下走，递增为 y 方向，使用 top 属性表示。而 3D 场景中 z 正方向(递增)为走出屏幕到你面前的方向。

第二种方式

使用属性 transition 指定一个属性和一个时长，只要这个属性值发生变化，它就按规定的时长进行渐变形成动画。

我们回到平移的那个 square，为其添加 transition 属性，指明 transform，时长设置为 5s，即5秒。

.square {

position:absolute;

width:100px; height:100px;

background:green;

top:0; left:0;

transform:translateZ(-200px);

/* 指定渐变属性，时长 */

transition: transform 5s;

}

此时，我们来改变它的 transform 平移值：

setTimeout(

function(){

document.querySelector(".square").style.transform = "translateZ(200px)";

},

1000

);

效果如下，多么优雅的一个变化过程，软着陆。

(6)小结

熟悉以上了这些概念与特性，就有了达成魔方目标的工具。更多特性若有兴趣，可进一步加深了解，想象空间很大。