做一个3d旋转立方体，谁能告诉我问题出在哪？ - css吧

level 1

夜冷枫轩楼主

做一个3d旋转立方体，谁能告诉我问题出在哪？代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3d动画</title>
<style>
.face{
position: relative;
margin: 200px auto;
height: 200px;
width: 200px;
perspective:1000px;
transform-style: preserve-3d;
}
.face div{
border:1px solid #000;
width: 100%;
height: 100%;
position: absolute;
top: 0;left: 0;
font:50px/200px sans-serif;
color: #000;
text-align: center;
}
.top{
animation: step1 2s both;
}
.bottom{
animation: step2 2s 2s both;
}
.left{
animation: step3 2s 4s both;
}
.right{
animation: step4 2s 6s both;
}
.back{
animation: step5 2s 8s both;
}
.front{
animation: step6 2s 10s both;
}
.face{
animation: step7 4s linear 12s infinite both;
}
@keyframes step1{
100%{
transform: rotateX(90deg) translateZ(100px);}
}
@keyframes step2{
100%{
transform: rotateX(-90deg) translateZ(100px);}
}
@keyframes step3{
100%{
transform: rotateY(-90deg) translateZ(100px);}
}
@keyframes step4{
100%{
transform: rotateY(90deg) translateZ(100px);}
}
@keyframes step5{
100%{
transform: rotateY(180deg) translateZ(100px);}
}
@keyframes step6{
100%{
transform: translateZ(100px);}
}
@keyframes step7{
100%{
transform: rotate3d(1,1,1,360deg);}
}
</style>
</head>
<body>
<div class="face">
<div class="top">top</div>
<div class="back">back</div>
<div class="front">front</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>

2017年04月05日 16点04分 1