旋转立方体实现——web前端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>旋转立方体</title>
</head>
<style>
html,body{
margin: 0;
padding: 0;
}
.container,
.container .outer,
.container .inner,
.container .inner div{
width: 16rem;
height: 16rem;
font-size: 1.8rem;
text-align: center;
line-height: 16rem;
}
.container{
margin: 0 auto;
animation: roate_y 4s linear infinite;
transform-style: preserve-3d;
}
@keyframes roate_y{
from{transform: rotateY(0);}
to{transform: rotateY(360deg);}
}
.container .outer{
transform-style: preserve-3d;
transform: rotateX(55deg);
}
.container .inner{
transform-style: preserve-3d;
transform: rotateY(45deg);
position: relative;
}
.container .inner div{
transform-style: preserve-3d;
position: absolute;
}
/* 单独设置每个面的旋转角度和图片颜色 */
.container .plane-1{
background: #fc5d73;
right: -8rem;
transform: rotateY(90deg);
}
.container .plane-2{
background: #91cb7b;
left: -8rem;
transform: rotateY(90deg);
}
.container .plane-3{
background: #4a8af4;
transform: translateZ(-8rem);
}
.container .plane-4{
background: rgba(0,255,255,0.3);
transform: translateZ(8rem);
}
.container .plane-5{
background: rgba(0,225,127,0.3);
transform: rotateX(-90deg);
bottom: -8rem;
}
.container .plane-6{
background: rgba(127,127,127,0.3);
transform: rotateX(-90deg);
top: -8rem;
}
</style>
<body>
<br><br><br><br><br>
<div class="container">
<div class="outer">
<div class="inner">
<div class="plane-1"><img src="1.png"></div>
<div class="plane-2"><img src="2.png"></div>
<div class="plane-3"><img src="4.png"></div>
<div class="plane-4"><img src="5.png"></div>
<div class="plane-5"><img src="3.png"></div>
<div class="plane-6"><img src="6.png"></div>
</div>
</div>
</div>
</body>
</html>
设置旋转效果
无限旋转，线性变化，4秒
.container{
margin: 0 auto;
animation: roate_y 4s linear infinite;
transform-style: preserve-3d;
}
立方体以Y轴为中心，旋转360度
@keyframes roate_y{
from{transform: rotateY(0);}
to{transform: rotateY(360deg);}
}
