CSS透视不起作用答案

【问题标题】：CSS perspective not workingCSS透视不起作用
【发布时间】：2012-02-28 10:51:21
【问题描述】：

我正在尝试使用 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); }

【问题讨论】：

标签： html css transform

【解决方案1】：

问题可能是您的 PC 上不支持硬件加速，而您的 Mac 上却支持...rotateX 和 rotateY 等 css3d 转换需要硬件加速。

在 chrome 中转到您的地址栏并输入

chrome://gpu

你会看到

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

如果是这种情况，则 3d 立方体不可见。

【讨论】：

【解决方案2】：

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

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

下面的操场应该向您展示透视等是如何工作的。

【讨论】：

很棒的工具。已收藏！透视不起作用。在任何立方体中。不在 Chrome 和 Safari 中。我看不到立方体。
我的立方体还是你的立方体？我可以在两者上看到它......
好的。我现在可以看到它....两者。我在工作，显然 PC 没有渲染它。这甚至可能吗？（我现在在 MAC 上）。
有点奇怪，也许它上面有一个非常非常旧的浏览器。

【解决方案3】：

前段时间我曾经使用过很多 3D 变换，但最近注意到 CSS3 透视图对我的网络浏览器（包括 Chrome）没有任何影响。尝试了以下方法，它在 Google Chrome 中有所帮助：

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

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

【讨论】：