这次做了个空心的魔方,能够转转转呀
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>魔方</title>
<style>
*{
padding:0;
margin:0;
}
body,html{
position: relative;
width:100%;
height:100%;
overflow: hidden;
}
.mf{
position: relative;
width:300px;
height:300px;
margin:100px auto;
transform-style: preserve-3d;
transform: rotatex(80deg)rotatey(80deg);;
transform-origin:50% ;
animation: mofang 10s linear infinite;
}
@keyframes mofang {
from{
transform: rotatex(0deg) rotatey(0deg)rotatez(0deg) ;
}
to{
transform: rotatex(360deg) rotatey(360deg)rotatez(360deg) ;
}
}
.m{
position: absolute;
left:0;
top:0;
width:300px;
height:300px;
box-sizing: border-box;
border-radius: 20px;
}
.m:nth-child(1) {
border: 5px solid rgba(208, 113, 183, 0.92);
transform: translatez(150px);
}
.m:nth-child(1)>div{
width:94px;
height:94px;
margin:1px;
float:left;
border-radius: 10px;
background: rgba(224, 66, 155, 0.87);
}
.m:nth-child(2) {
border: 5px solid #35d197;
transform: translatez(-150px);
}
.m:nth-child(2)>div{
width:94px;
height:94px;
margin:1px;
float:left;
border-radius: 10px;
background: rgb(127, 231, 129);
}
.m:nth-child(3) {
border: 5px solid #D1CF18;
transform: translatex(150px)rotatey(90deg);
}
.m:nth-child(3)>div{
width:94px;
height:94px;
margin:1px;
float:left;
border-radius: 10px;
background: #F4F871;
}
.m:nth-child(4) {
transform: translatex(-150px) rotatey(90deg);
border: 5px solid #49b3bf;
}
.m:nth-child(4)>div{
width:94px;
height:94px;
margin:1px;
float:left;
border-radius:10px;
background: #7FB6FF;
}
.m:nth-child(5) {
transform: translatey(150px) rotatex(90deg);
border: 5px solid #eb616a;
}
.m:nth-child(5)>div{
width:94px;
height:94px;
margin:1px;
float:left;
border-radius:10px;
background: #FF7F8F;
}
.m:nth-child(6) {
transform: translatey(-150px) rotatex(90deg);
border: 5px solid #d081db;
}
.m:nth-child(6)>div{
width:94px;
height:94px;
margin:1px;
float:left;
border-radius: 10px;
background: rgb(47, 227, 192);
}
</style>
</head>
<body>
<div class="mf">
<div class="m">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="m">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="m">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="m">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="m">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="m">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>