html3d转换,HTML-CSS-182：3D转换模块

正方体代码

正方体

*{

margin:0;

padding:0;

}

ul{

width:200px;

height:200px;

border:1px solid #000;

margin:0 auto;

margin-top:100px;

font-size:100px;

text-align:center;

line-height:200px;

position:relative;

transform:rotateX(0deg)rotateY(0deg);

transform-style:preserve-3d;

/*perspective: 500px;*/

}

ul li{

width:200px;

height:200px;

list-style:none;

position:absolute;

top:0;

left:0;

}

ul li:nth-of-type(1){

background-color:red;

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

}

ul li:nth-of-type(2){

background-color:blue;

transform:rotateX(180deg)translateZ(100px);

}

ul li:nth-of-type(3){

background-color:green;

transform:rotateX(270deg)translateZ(100px);

}

ul li:nth-of-type(4){

background-color:yellow;

transform:rotateX(360deg)translateZ(100px);

}

ul li:nth-of-type(5){

background-color:purple;

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

}

ul li:nth-of-type(6){

background-color:orange;

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

}

123456

长方体代码

长方体

*{

margin:0;

padding:0;

}

ul{

width:200px;

height:200px;

/*border: 1px solid #000;*/

margin:0 auto;

margin-top:100px;

font-size:100px;

text-align:center;

line-height:200px;

position:relative;

transform:rotateX(0deg)rotateY(0deg);

transform-style:preserve-3d;

/*perspective: 500px;*/

}

ul li{

width:200px;

height:200px;

list-style:none;

position:absolute;

top:0;

left:0;

}

ul li:nth-of-type(1){

background-color:red;

transform:rotateX(90deg)translateZ(100px)scaleX(2);

}

ul li:nth-of-type(2){

background-color:blue;

transform:rotateX(180deg)translateZ(100px)scaleX(2);

}

ul li:nth-of-type(3){

background-color:green;

transform:rotateX(270deg)translateZ(100px)scaleX(2);

}

ul li:nth-of-type(4){

background-color:yellow;

transform:rotateX(360deg)translateZ(100px)scaleX(2);

}

ul li:nth-of-type(5){

background-color:purple;

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

}

ul li:nth-of-type(6){

background-color:orange;

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

}

123456