css3d正方形包一个正方形,css3d画一个正方体

html部分

A

B

C

D

E

F

style部分

#box div{

position: absolute;

height:160px;

width: 160px;

border:3px solid #000;

background: rgba(255,200,100,0.8);

text-align:center;

font-size: 130px;

}

#box{

width: 160px;

height: 160px;

margin:100px auto;

-webkit-transform-style:preserve-3d;

-webkit-transform-origin:80px 80px 0;

-webkit-perspective:140px;

}

#box>div:nth-child(1){

-webkit-transform: translateZ(80px);

}

#box>div:nth-child(2){

transform: rotateX(90deg) translateZ(-80px);

}

#box>div:nth-child(3){

transform: rotateX(90deg) translateZ(80px);

}

#box>div:nth-child(4){

transform: rotateY(90deg) translateZ(80px);

}

#box>div:nth-child(5){

transform: rotateY(90deg) translateZ(-80px);

}

#box>div:nth-child(6){

transform: translateZ(-80px);

}

下面是正方形截图

正方形截图

transform-style

该属性有两个值，一个是flat,一个是perspective-3d,前者是默认值，代表是平面渲染，没有3d的效果，后者恰好相反，要使用3d效果，需要设置改属性为后者

perspective

该属性定义了到z=0的距离，默认是0或者none，此时没有3d的效果，需要大于0才能看到效果。

perspective-origin

该属性是用来定义视角的x位置和y位置，即眼睛看的位置，默认是50%，50%，即正方形的中心位置。

坐标轴

注意看坐标轴，这是没有任何旋转时坐标轴的标识，+x右，-x左，+y上，-y下，+z前，-z后，假如元素执行了rotateX(90deg)，即在x轴顺时针旋转了90度， 像C的正方形先是在x,y轴上的正方形，放倒在x,z轴上，此时y轴变成了z,z变成了y。

正方形截图