旋转 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（和宽度）添加到立方体的边，然后仅更改 [= 的翻译16=]:

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

似乎可以正常工作（尽管文本会颠倒显示）。并没有真正检查过平移和旋转属性值本身，所以也许可以避免设置位置，但这是我首先想到的。

Answer 2

使用此代码并从 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);
}

这里是 fiddle http://jsfiddle.net/bwpuab64/2/

Answer 3

这是一个解决方案，您需要先将它们定位为绝对位置，以确保您有一个明确的起始位置：

 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.net/upyht8sb/7/

旋转 CSS 立方体

Rotating CSS cube

css

css-transforms