旋转的CSS立方体

Question

我想创建一个CSS立方体，它有四个面（正面、背面、顶部和底部），并且在X轴上不断旋转（向上或向下）。但由于某种原因，我无法使这四个面对齐，以便看起来像一个立方体。以下是我的标记：

<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条边吗？

- Igal

---

为什么不去搜索一个CSS 3D盒子呢？反正你已经在使用一个类似3D的版本了（我以前见过那段代码）。既然你正在使用别人的作品，就去找一个完整的3D盒子并使用它。 - Ruddy

http://jsfiddle.net/upyht8sb/6/ 在旋转之前，您必须进行转换。这样更有意义。 - Persijn

@Persijn 非常感谢你！ :) - Igal

@Igal 很高兴能帮忙。 - Persijn

Answer 1

不确定这是否是最佳方法，但似乎将 position: absolute（和一个宽度）添加到立方体的侧面，然后仅更改“front”的平移即可：

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

看起来这样做可以使其工作（尽管文本会倒置显示）。我没有真正检查过翻译和旋转属性的值本身，所以也许可以避免设置位置，但这是我想到的第一件事。

- Jo Pango

---

非常感谢！我现在用 rotateY(180deg) scale(-1, -1) 修复了倒置的文本 - http://jsfiddle.net/upyht8sb/8/ - Igal

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);}
}

请查看示例代码： http://jsfiddle.net/upyht8sb/7/

- Victor Radu

---

还更改了一些旋转以修正方向。 - Victor Radu

Answer 3

使用此代码并从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.net/bwpuab64/2/

- eliteware