如何用css3制作一个旋转的立方体
css3增加的动画效果使得前端制作某些动画更加方便，流畅，如何制作一个最简单的会旋转的立方体呢？话不多说，直接上代码！
html代码如下，需要一个大的div包裹六个div作为立方体的六个表面
<body>
<div class="box">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
</div>
</body>
css3部分
<style type="text/css">
body{
padding: 0;
margin:0;
perspective:800px;
}
@keyframes rotate{
0%{
transform:rotateX(0deg) rotateY(0deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
.box{
margin:200px auto;
width:300px;
height:300px;
position:relative;
transform-style: preserve-3d;
transform:rotateX(-45deg) rotateY(-45deg);
animation:rotate 5s infinite linear;
}
.box>div{
width:100%;
height:100%;
text-align:center;
line-height:300px;
font-size:60px;
font-weight:bold;
color:#FFFFFF;
border:1px solid #FFFFFF;
position:absolute;
top:0;
left:0;
/* transition:transform 5s ease-in; */
}
.one{
transform:translateX(150px) rotateY(90deg);
background:red;
opacity:.5;
}
.two{
transform:translateX(-150px) rotateY(-90deg);
background:green;
opacity:.5;
}
.three{
transform:translateZ(-150px);
background:yellow;
opacity:.5;
}
.four{
transform:translateZ(150px);
background:blue;
opacity:.5;
}
.five{
transform:translateY(-150px) rotateX(90deg);
background:purple;
opacity:.5;
}
.six{
transform:translateY(150px) rotateX(-90deg);
background:pink;
opacity:.5;
}
</style>
初学前端小猿可能会碰到一些小问题，欢迎与我探讨。
最终效果