我需要在使用-webkit-transform:translate3d()转换的一些元素之上浮动一些文本。我发现的问题是，我能够在任何经过3d变换的任何东西上堆叠元素的唯一方法是使用translate3d()并将其放在z轴上方。这对于图像和形状来说没什么问题，但对于文本来说这很糟糕，因为文本出现了令人无法接受的模糊现象。
是否有某种方法可以在3d变换后的元素上浮动非三维变换文本或保留文本的清晰度？
答案 0 :(得分：1)
您不需要仅使用3d变换来使文本浮动，只需在背景和文本上设置z-indexes。也就是说，当与3D动画结合使用时，文本渲染可能非常难以预测（并且移动野生动物园的渲染效果往往比桌面游戏更好，所以如果你正在预览移动设备的东西 - 真的要在你的实际iPhone上看一下。）
也就是说，有些事情你可以试着让文字看不到桌面游戏中的所有IE6。
1）将font-weight设置为light，然后以比文本更轻的色调添加一个像素-webkit-text-stroke 2）以较亮的色调添加文本阴影，零偏移和1或2像素模糊 3）使字体大小非常大，并使用3D变换将其缩放到您需要的大小。 4）使用字体平滑
答案 1 :(得分：1)
如果对translate3d（x，y，z）中的 z 应用零值或负值，则可以将位置放在转换后的元素上方，即：
-webkit-transform: translate3d(100px, 100px, 0)
这是一个适用于Safari的测试用例：