html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>3D模型</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="camera">
<div class="stage">
<div class="cube up">up</div>
<div class="cube down">down</div>
<div class="cube left">left</div>
<div class="cube right">right</div>
<div class="cube font">font</div>
<div class="cube after">after</div>
</div>
</div>
</body>
</html>
css部分
.camera
{
width:500px;
height:500px;
perspective:1000px; //相机距离
perspective-origin:center center;//相机位置
/*border:1px dashed black;*/
}
.stage
{
border:1px dashed blue;
width:100%;
height:100%;
transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);
//绕X/Y/Z轴旋转，度数你自己写
transform-style:preserve-3d; //3D模型
}
.cube //6个面共同设置
{
width:200px;
height:200px;
border:1px dashed blue;
margin-top: 100px;
margin-left: 100px;
position:absolute;
}
.up
{
background-color: red;
transform:rotateX(90deg) translateZ(100px); //旋转,平移
}
.down
{
background-color:blue;
transform:rotateX(-90deg) translateZ(100px);
}
.left
{
background-color:green;
transform:rotateY(-90deg) translateZ(100px);
}
.right
{
background-color:orange;
transform:rotateY(90deg) translateZ(100px);
}
.font
{
background-color:rgb(237,21,162);
transform:translateZ(100px);
}
.after
{
background-color:rgb(21,234,237);
transform:rotateX(180deg) translateZ(100px);
}