旋转魔方
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>魔方</title>
<style>
@keyframes round{
0%{transform: rotateY(0deg) rotateX(0deg);}
100%{transform: rotateY(360deg) rotateX(360deg);}
}
html,body{
width:100%;
height:100%;
}
.mian{
position: absolute;
width:300px;
height:300px;
opacity: 0.3;
}
.mof{
transform-style: preserve-3d;
position: absolute;
width:300px;
height:300px;
top:calc(50% - 150px);
left:calc(50% - 150px);
animation:round 10s linear infinite;
}
.mian:nth-of-type(1){
background-color: red;
transform: rotateY(90deg) translateZ(150px);
}
.mian:nth-of-type(2){
background-color: blue;
transform: rotateY(180deg) translateZ(150px);
}
.mian:nth-of-type(3){
background-color: green;
transform: rotateY(270deg) translateZ(150px);
}
.mian:nth-of-type(4){
background-color: yellow;
transform: rotateY(360deg) translateZ(150px);
}
.mian:nth-of-type(5){
background-color: black;
transform: rotateX(90deg) translateZ(-150px);
}
.mian:nth-of-type(6){
background-color:#B14DA1FF;
transform: rotateX(90deg) translateZ(150px);
}
.ge{
width:300px;
height: 300px;
}
</style>
</head>
<body>
<div class="mof">
<div class="mian">
<table class="ge" border="5">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="mian">
<table class="ge" border="5">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="mian">
<table class="ge" border="5">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="mian">
<table class="ge" border="5">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="mian">
<table class="ge" border="5">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
<div class="mian">
<table class="ge" border="5">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
</body>
</html>
标签：translateZ,魔方,mian,transform,旋转,rotateY,type,150px 来源： https://www.cnblogs.com/2618hxh/p/14151907.html