用只有CSS创建旋转立方体

Question

用只有CSS创建旋转立方体

10

我正在参加一个比赛，但遇到了一些困难。我需要仅使用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>

我贴了一张图片，这样你就可以看到我需要的结果了：

http://www.sitepor500.com.br/index.php?q=criacao-site-seo&a

到目前为止，我使用绝对定位元素来创建6个面，但我不知道如何仅使用CSS使其旋转。请不要使用JS！非常感谢。

- amandanovaes

这个范围太广了。而且有很多关于它的教程/示例，如http://cssdeck.com/labs/9avpkiv8vl，http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/，http://cssdeck.com/labs/simple-css3-3d-cube，http://www.the-art-of-web.com/css/3d-transforms/#.UfHVDo3rwZw等。 - Zach Saucier

非常感谢！我在巴西的网站上找了很多，但都没有成功。我的英语不好，所以我没有用英语搜索。但是你提供的第一个链接有一个很好的示例！再次感谢你。 - amandanovaes

嘿，@Zeaklous先生，我该如何将您的答案标记为解决我的问题的答案？它出现在评论中，所以我无法选择您的答案！ - amandanovaes

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zach Saucier · Accepted Answer

有很多教程和示例展示了如何做到这一点：示例1 示例2 示例3 示例4 等等。

从示例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 { 
    transform: translateZ(60px);
}
.spinner .face2 { 
    transform: rotateY(90deg) translateZ(60px); 
}
.spinner .face3 { 
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px); 
}
.spinner .face4 { 
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); 
}
.spinner .face5 { 
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); 
}
.spinner .face6 { 
    transform: rotateX(-90deg) translateZ(60px); 
}

.spinner {
    animation: spincube 12s ease-in-out infinite;
    transform-style: preserve-3d;
    transform-origin: 60px 60px 0;
}

@keyframes spincube {
    16%      { transform: rotateY(-90deg); }
    33%      { transform: rotateY(-90deg) rotateZ(90deg); }
    50%      { transform: rotateY(180deg) rotateZ(90deg); }
    66%      { transform: rotateY(90deg) rotateX(90deg); }
    83%      { 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>