Question

我正在尝试使用CSS创建一个多维数据集。我实际上认为它已经存在但我看不到它。随意edit the fiddle。

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

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

来源：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上...... rotateX和rotateY等css3d转换需要硬件加速。

Chrome中的

转到您的地址栏并输入

铬：// GPU

你会看到

3D CSS：不可用。硬件加速禁用。

如果是这种情况，那么3d立方体就不可见了。

Answer 2

查看http://css3.bradshawenterprises.com/transforms/#transDemo3。

我在旋转的立方体周围有一个包装器 - 在这种情况下为了保持简单，我实际上使用了三个div，一个用于X，一个用于Y，一个用于Z.

下面的游乐场应该向你展示透视等的工作方式。

Answer 3

我以前使用过很多3D变换，但最近发现CSS3透视对我的网络浏览器（包括Chrome）没有任何影响。试过以下内容，它在Google Chrome中有所帮助：

导航至“chrome：// flags”
找到标记为“覆盖软件渲染列表”的项目并将其禁用
重新启动浏览器

我知道它有点晚了，以防万一它可以帮到你...

CSS视角不起作用

3 个答案: