仅使用 CSS 创建一个旋转立方体
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17871528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a rotating cube with ONLY CSS
提问by amandanovaes
I am working on a contest but I am having some difficulties. I need to create a cube (rotating) using only CSS. The only HTML code that I have to use is:
我正在参加比赛，但遇到了一些困难。我需要仅使用 CSS 创建一个立方体（旋转）。我必须使用的唯一 HTML 代码是：
<div id="container">
<div id="imasters-cube">
<div class="front"></div>
<div class="back"></div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</div>
I pasted an image so you can see the result that I need:
我粘贴了一张图片，以便您可以看到我需要的结果：
http://www.sitepor500.com.br/index.php?q=criacao-site-seo&a
http://www.sitepor500.com.br/index.php?q=criacao-site-seo&a
So far I am using absoluted positioned elements to create the 6 faces but I have no idea how to make it rotate using only CSS. No JS, please!
到目前为止，我使用绝对定位元素来创建 6 个面，但我不知道如何仅使用 CSS 使其旋转。没有JS，拜托！
Thank you so much
非常感谢
回答by Zach Saucier
There are tons of tutorials/examples show how to do this: Example 1Example 2Example 3Example 4etc.
有大量的教程/示例展示了如何执行此操作：示例 1示例 2示例 3示例 4等等。
Pulled from Example 2:
从示例 2 中提取：
.spinner div {
position: absolute;
width: 120px;
height: 120px;
border: 1px solid #ccc;
background: rgba(255,255,255,0.8);
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
text-align: center;
line-height: 120px;
font-size: 100px;
}
.spinner .face1 {
-webkit-transform: translateZ(60px);
-ms-transform: translateZ(60px);
transform: translateZ(60px);
}
.spinner .face2 {
-webkit-transform: rotateY(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) translateZ(60px);
transform: rotateY(90deg) translateZ(60px);
}
.spinner .face3 {
-webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
-ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
transform: rotateY(90deg) rotateX(90deg) translateZ(60px);
}
.spinner .face4 {
-webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(180deg) rotateZ(90deg) translateZ(60px);
}
.spinner .face5 {
-webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
-ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px);
}
.spinner .face6 {
-webkit-transform: rotateX(-90deg) translateZ(60px);
-ms-transform: rotateX(-90deg) translateZ(60px);
transform: rotateX(-90deg) translateZ(60px);
}
.spinner {
-webkit-animation: spincube 12s ease-in-out infinite;
animation: spincube 12s ease-in-out infinite;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 60px 60px 0;
-ms-transform-origin: 60px 60px 0;
transform-origin: 60px 60px 0;
}
@-webkit-keyframes spincube {
16% { -webkit-transform: rotateY(-90deg); }
33% { -webkit-transform: rotateY(-90deg) rotateZ(90deg); }
50% { -webkit-transform: rotateY(180deg) rotateZ(90deg); }
66% { -webkit-transform: rotateY(90deg) rotateX(90deg); }
83% { -webkit-transform: rotateX(90deg); }
}
@keyframes spincube {
16% { -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); }
33% { -ms-transform: rotateY(-90deg) rotateZ(90deg); transform: rotateY(-90deg) rotateZ(90deg); }
50% { -ms-transform: rotateY(180deg) rotateZ(90deg); transform: rotateY(180deg) rotateZ(90deg); }
66% { -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); }
83% { -ms-transform: rotateX(90deg); transform: rotateX(90deg); }
}<div id="stage" style="width: 120px; height: 120px;">
<div class="spinner">
<div class="face1">1</div>
<div class="face2">2</div>
<div class="face3">3</div>
<div class="face4">4</div>
<div class="face5">5</div>
<div class="face6">6</div>
</div>
</div>