CSS视角不起作用

Question

我正在尝试用CSS创建一个多维数据集.我实际上认为它已经存在但我看不到它.随意编辑小提琴.

我不明白为什么这个观点不起作用.这是最佳做法吗？

是否可以整体旋转立方体？

来源:24ways.

HTML:

<section class="container">
      <div id="cube">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
      </div>
    </section>

CSS:

.container {
  margin: 200px auto;
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-perspective: 800px;
 }

 #cube {
  width: 100%;
  height: 100%;
  position: absolute;
 -webkit-transform-style: preserve-3d;
 }

#cube figure {
  width: 198px;
  height: 198px;
  display: block;
  position: absolute;
  border: 1px solid #ddd;
  background-color: rgba(0,0,0,0.2);
}

#cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); }
#cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); }
#cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); }
#cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); }
#cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); }
#cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }    

Answer 1

问题可能是您的PC不支持硬件加速,而且它在您的mac ... css3d转换,例如rotateX并rotateY要求硬件加速.

在chrome中转到你的地址栏然后输入

铬:// GPU

你会看见

3D CSS:不可用.硬件加速禁用.

如果是这种情况,那么3d立方体是不可见的.