正方体代码
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>正方体
*{
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);
}
<li>1
<li>2
<li>3
<li>4
<li>5
<li>6
</html>
长方体代码
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>长方体
*{
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);
}
<li>1
<li>2
<li>3
<li>4
<li>5
<li>6
</html>
