1

我有一个包含一系列立方体的页面。这些立方体使用 CSS 进行 3D 转换。

它们在 Windows 7 上的 Chrome 中显示良好，但在 Windows XP 上的 Chrome 中，我看到的只是白色背景。两者都运行最新版本的 Chrome。

在 jsfiddle 上查看完整页面

<div class="cube" style="-webkit-transform: translateZ(-32.5px);">
    <div class="front" style="-webkit-transform: translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
    <div class="back" style="-webkit-transform: rotateX(-180deg) translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
    <div class="right" style="-webkit-transform: rotateY(90deg) translateZ(32.5px);">               
        <img src="/search.png" width="65" height="65">
    </div>
    <div class="left" style="-webkit-transform: rotateY(-90deg) translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
    <div class="top" style="-webkit-transform: rotateX(90deg) translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
    <div class="bottom" style="-webkit-transform: rotateX(-90deg) translateZ(32.5px);">
        <img src="search.png" width="65" height="65">
    </div>
</div>
4

4 回答 4

8

只有启用 GPU 加速，Chrome 才会正确渲染 3D css。如果您在 safari for windows 上测试相同的代码，它应该可以工作。

要查看您的 chrome 是否启用了 GPU 加速，请在地址栏中输入 about:GPU 并查看它的内容。

http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome

于 2013-03-15T18:17:54.720 回答
0

嗯，也许您没有启用 3D 渲染的 GPU，或者您的图形驱动程序不支持它？

于 2013-03-17T11:46:48.663 回答
0

你试过现代化吗？

转到此页面 http://modernizr.com/download/#-flexboxlegacy-csstransforms3d-shiv-cssclasses-addtest-prefixed-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load

点击下面的下载。

在您的页面上使用 JavaScript。

如果它会按照我想的方式工作，那么在 Chrome 中的 Win7 机器上，html 标签应该有一个类，csstransforms3d而在 Chrome 中的 WinXP 机器上，html 标签应该有一个类no-csstransforms3d

我不知道modernizr / chrome是否智能看，如果3d加速可用并将其反映在适当的css类中

编辑

这是一个小提琴 http://jsfiddle.net/uSbYL/1/

于 2013-03-20T16:57:35.617 回答
0

Follwing 将适用于 chrome 和 firefox CSS 代码

.flip-container {
  perspective: 1000;
  -webkit-perspective: 1000;
}
  /* flip the pane when hovered */
  .flip-container:hover .flipper, .flip-container.hover .flipper {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
  }

.flip-container, .front, .back {
  float: left;
  height: 179px;
  margin-bottom: 49px;
  margin-left: 31px;
  width: 258px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  -webkit-transition: 0.6s;
  -webkit-transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  -webkit-backface-visibility:hidden; /* Chrome and Safari */
  -moz-backface-visibility:hidden; /* Firefox */
  -ms-backface-visibility:hidden;
  position: absolute;
  top: 0;
  left: -42px;
}

/* front pane, placed above back */
.front {
  z-index: 2;
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
}

HTML 代码

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
  <div class="flipper">
    <div class="product-box front">
       #front content
    </div>
    <div class="product-box back">
      #back content
    </div>
  </div>
</div>
于 2013-03-21T11:08:33.017 回答