旋转的CSS立方体

Question

我想创建一个CSS立方体，它有4个面（前、后、上、下），并且它只在X轴上不断地向上（或向下）旋转。但由于某些原因，我不能将所有的4个面对齐，所以它看起来像一个立方体。这是我的标记。

<div class="cube">
<div class="front">
    <h1>Front</h1>
</div>
<div class="bottom">
    <h2>Bottom</h2>
</div>
<div class="top">
    <h2>Top</h2>
</div>
<div class="back">
    <h2>Back</h2>
</div>

还有我的CSS

body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #F4F6F8;
padding: 3em 0 0 0;
line-height: 62px;
-webkit-perspective: 1000px; /* <-NB */
}

.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;

-webkit-transform-style: preserve-3d;
-webkit-animation: rotate-cube 10s linear infinite;
}

.front, .bottom, .top, .back {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
height: 100px;
}

.front {
-webkit-transform: translateZ(50px);
}

.bottom {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}

.top {
-webkit-transform: rotateX(90deg) translateZ(-50px);
}

.back {
-webkit-transform: rotateX(180deg) translateZ(-50px);
}

@-webkit-keyframes rotate-cube {
0%{-webkit-transform: rotateX(0deg);}
10%{-webkit-transform: rotateX(90deg);}
40%{-webkit-transform: rotateX(180deg);}
60%{-webkit-transform: rotateX(270deg);}
90%{-webkit-transform: rotateX(360deg);}
100{-webkit-transform: rotateX(360deg);}
}

这里是 JSFiddle. 不要介意动画本身，我知道它不漂亮，但它仍然是一个工作在进行中。目前我只想把4个面都对齐好。

我做错了什么，怎样才能把4个面都对齐？

Answer 1

不知道这是否是最好的方法，但似乎添加了 position: absolute(和一个宽度)，到立方体的两侧，然后只改变 "前面 "的翻译。

.front {
    -webkit-transform: translateZ(-50px);
}

似乎就能成功了（虽然文字是倒着显示的）。没有真正检查翻译和旋转属性值本身，所以也许设置位置可以避免，但这是我首先想到的。

Answer 2

这里有一个解决方案，你需要先将它们绝对定位，以确保你有一个明确的起始位置。

 body {
    color: rgb(6, 106, 117);
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 100%;
    background: #F4F6F8;
    padding: 3em 0 0 0;
    line-height: 62px;
    -webkit-perspective: 1000px;
}

.cube {
    width: 30%;
    text-align: center;
    margin: 0 auto;
    height: 100px;

    -webkit-transform-style: preserve-3d;
    -webkit-animation: rotate-cube 10s linear infinite;
}

.front, .bottom, .top, .back {
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, .8);
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
    height: 100px;
    position: absolute;
    width: 100%;
}

.front {
    -webkit-transform: translateZ(50px);
}

.bottom {
    -webkit-transform: rotateX(90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.top {
    -webkit-transform: rotateX(-90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.back {
    -webkit-transform: rotateX(180deg) translateZ(50px);
}

@-webkit-keyframes rotate-cube {
    0%{-webkit-transform: rotateX(0deg);}
    10%{-webkit-transform: rotateX(90deg);}
    40%{-webkit-transform: rotateX(180deg);}
    60%{-webkit-transform: rotateX(270deg);}
    90%{-webkit-transform: rotateX(360deg);}
    100{-webkit-transform: rotateX(360deg);}
}

参见 fiddle: #http:/jsfiddle.netupyht8sb7

Answer 3

用这个代码，把HTMl中不需要的部分去掉。不知道你想去掉哪些，所以我就把它整了出来。

HTMl

<div id="container">
  <div class="step">
    <div class="front"></div>
    <div class="right"></div>  
    <div class="left"></div>            
    <div class="back"></div>            
    <div class="top"></div>
    <div class="bottom"></div>
  </div>

CSS

#container{
width:100%;
margin-top:100px;
-webkit-perspective : 1000px;
-webkit-perspective-origin  : 25% -15%;
-moz-perspective : 1000px;
-moz-perspective-origin  : 25% -15%;
}

.step{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
-webkit-transform-style : preserve-3d;
-webkit-animation:rotate 5s infinite linear;
-moz-transform-style : preserve-3d;
-moz-animation:rotate 5s infinite linear;
transform-style : preserve-3d;
animation:rotate 5s infinite linear;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg) rotateX(360deg) ;
  }
}
@-moz-keyframes rotate {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg) rotateX(360deg) ;
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg) rotateX(360deg) ;
  }
}
.step>div {
position: absolute;
opacity: 1;
}
.front{
width:200px;
height:200px;
background:#000;
-webkit-transform: rotateY(0deg) translateZ(0px);
}
.right{
width:200px;
height:200px;
background:#222;
-webkit-transform: rotateY(90deg) translateZ(100px) translateY(0) translateX(100px);
}
.left{
width:200px;
height:200px;
background:#444;
-webkit-transform: rotateY(90deg) translateZ(-100px) translateY(0) translateX(100px);
}
.back{
width:200px;
height:200px;
background:#666;
-webkit-transform: rotateY(0deg) translateZ(-200px) translateY(0) translateX(0px);
}
.top{
width:200px;
height:200px;
background:#888;
-webkit-transform: rotateX(90deg) translateZ(100px) translateY(-100px) translateX(0px);
}
.bottom{
width:200px;
height:200px;
background:#aaa;
-webkit-transform: rotateX(90deg) translateZ(-100px) translateY(-100px) translateX(0px);
}

这里有一个小提琴 http:/jsfiddle.netbwpuab642