正方体一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正方体</title>
<style>
* {
margin: 0;
padding: 0;
}
/*六个面叠加起来,子绝父相*/
ul {
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
position: relative;
transform: rotateX(0deg ) rotateY(0deg);
transform-style: preserve-3d;
}
ul li {
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-child(1) {
background-color: red;
transform: translateX(-100px) rotateY(-90deg);
}
ul li:nth-child(2) {
background-color: green;
transform: translateX(100px) rotateY(90deg);
}
ul li:nth-child(3) {
background-color: blue;
transform: translateY(100px) rotateX(-90deg);
}
ul li:nth-child(4) {
background-color: yellow;
transform: translateY(-100px) rotateX(90deg);
}
ul li:nth-child(5) {
background-color: purple;
transform: translateZ(100px);
}
ul li:nth-child(6) {
background-color: pink;
transform-origin: 100px 100px;
transform: translateZ(-100px) rotateY(180deg);
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
注意点:
1.此方法思路是,将左右两个面分别沿着x轴平移100px和-100px然后将其过中心绕y轴旋转90°和-90°。上下两个面就沿着y轴平移100px和-100px,然后过其中心绕x轴旋转90°和-90°。然后将前后两个面分别沿z轴平移100px和-100px.
2.有一个缺陷,6那个面数字不能正确显示。