在Windows XP上,Chrome不会显示3D变换

1 html javascript css

我有一个包含一系列立方体的页面.这些立方体使用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>
Run Code Online (Sandbox Code Playgroud)

小智 8

如果启用了GPU加速,Chrome只会正确渲染3D css.如果你在Safari的safari上测试相同的代码它应该工作.

要查看您的chrome是否启用了GPU加速,请在地址栏中键入about:GPU并查看其内容.

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