java3d创建立方体,css 3d立方体

了解一些css3动画知识，3d效果实现。

原文连接

状态1

首先创建一个立方体容器元素

.box {

position: relative;

width: 100px;

height: 100px;

transform-style: preserve-3d;

}

transform-style 属性的定义为规定如何在3d空间中呈现被嵌套元素

flat为默认值平面显示，preserve-3d为子元素保留3d位置

也就是该属性在需要展示3d效果元素的父元素上设置

立方体的六个面

创建6个div元素设置相同绝对定位显示，为了效果明显每个面设置了0.5的透明度。

.box div {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: .5;

transform-origin: center;

}

transform-origin 属性设置被转换元素的位置，可以理解为转换的中心点在哪个位置

状态2

为了显示出立方体的上下面和侧面需要对4个面进行绕X、Y轴的直角转换

.box div:nth-of-type(1),

.box div:nth-of-type(2){

transform: rotatex(90deg);

}

.box div:nth-of-type(3),

.box div:nth-of-type(4){

transform: rotatey(90deg);

}

可以给容器增加一定角度突出效果

.box{

transform: rotatex(45deg) rotatey(45deg);

}

状态3

接下来就是撑开6个面，构建成为立方体啦

在每个面转换的基础上增加/减少宽高二分之一的Z轴位置转换

.box div:nth-of-type(1){

transform: rotatex(90deg) translatez(50px);

}

.box div:nth-of-type(2){

transform: rotatex(90deg) translatez(-50px);

}

.box div:nth-of-type(3){

transform: rotatey(90deg) translatez(50px);

}

.box div:nth-of-type(4){

transform: rotatey(90deg) translatez(-50px);

}

.box div:nth-of-type(5){

transform: translatez(50px);

}

.box div:nth-of-type(6){

transform: translatez(-50px);

}

这样一个3d立方体就已经构建完成啦 ^_^