<!DOCTYPE html>
<html>
<head>
<title>立方体</title>
<meta charset="utf-8">
<style>
.da{
width: 200px;
margin:100px auto;
position:relative;
transform: rotateX(-32deg)rotateY(27deg);
perspective: 1000px;
transform-style: preserve-3d;
}
.a{
width:100px;
height:100px;
line-height:100px;
border:1px solid grey;
background-color:rgba(91,210,68,0.3);
text-align: center;
font-size:40px;
color:white;
position:absolute;
}
.b{
transform: translateZ(50px);
}
.c{
transform: translateZ(-50px);
}
.d{
transform: rotateX(90deg) translateZ(-50px);
}
.e{
transform: rotateX(90deg) translateZ(50px);
}
.f{
transform: rotateY(90deg) translateZ(-50px);
}
.g{
transform: rotatey(90deg) translateZ(50px);
}
</style>
</head>
<body>
<div class="da">
<div class="a b">1</div>
<div class="a c">2</div>
<div class="a d">3</div>
<div class="a e">4</div>
<div class="a f">5</div>
<div class="a g">6</div>
</div>
</body>
</html>
C3H5 3d立体魔方效果
最新推荐文章于 2021-12-22 11:26:26 发布