<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正方体</title>
<link rel="stylesheet" type="text/css" href="css/正方体.css"/>
</head>
<body>
<div class="beijin">
<div class="wutai">
<div class="F1"></div>
<div class="F2"></div>
<div class="F3"></div>
<div class="F4"></div>
<div class="F5"></div>
<div class="F6"></div>
</ul>
</div>
</div>
</body>
</html>
.beijin{
width: 1000px;
height: 800px;
background: #CCCCCC;
position: relative;
margin: auto;
perspective: 800px;
}
.wutai{
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin: -100px 0 0 -100px;
transform-style: preserve-3d;
animation: zhuang 15s linear infinite;
}
@keyframes zhuang{
100%{
transform: rotateX(360deg) rotateY(360deg)
}
}
.wutai div{
width: 200px;
height: 200px;
position: absolute;
}
.F1{
background: aqua;
transform: translateZ(100px);
}
.F2{
background: red;
transform: translateZ(-100px);
}
.F3{
background: orange;
transform: rotateY(90deg) translateZ(100px);
}
.F4{
background: orchid;
transform: rotateY(-90deg) translateZ(100px);
}
.F5{
background: black;
transform: rotateX(90deg) translateZ(100px);
}
.F6{
background: blue;
transform: rotateX(-90deg) translateZ(100px);
}
这是一个会自转的正方体
5847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
