我有一个包含一系列立方体的页面.这些立方体使用CSS在3D中进行转换.
它们在Windows 7上的Chrome中显示良好,但在Windows XP上的Chrome中,我看到的只是白色背景.两者都运行最新版本的Chrome.
<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
| 归档时间: |
|
| 查看次数: |
1882 次 |
| 最近记录: |