Windows XP的Chrome中未显示3D转换

Question

我有一个包含一系列多维数据集的页面。 这些多维数据集使用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>

Answer 1

如果启用了GPU加速功能，Chrome只会正确渲染3D CSS。 如果您在Windows的safari上测试相同的代码，它应该可以工作。

要查看您的Chrome是否启用了GPU加速功能，请在地址栏中输入about：GPU并查看其内容。

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

Answer 2

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>

Answer 3

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

Answer 4

您是否尝试过modernizr？

转到此页面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/