仅使用CSS创建旋转的多维数据集 [英] Create a rotating cube with ONLY CSS

问题描述

我正在参加比赛，但遇到了一些困难.我只需要使用CSS创建一个多维数据集(旋转).我唯一需要使用的HTML代码是:

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:

 <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

到目前为止，我正在使用绝对定位的元素来创建6个面，但是我不知道如何仅使用CSS使其旋转.请不要JS！

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!

非常感谢您

推荐答案

有大量的教程/示例显示了如何执行此操作:示例2 示例3

There are tons of tutorials/examples show how to do this: Example 1 Example 2 Example 3 Example 4 etc.

从示例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>

这篇关于仅使用CSS创建旋转的多维数据集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！