我正在使用Javascript在Chrome中操作CSS转换，我注意到当translateZ值变得太低(很远)时，元素将会消失。这似乎只有在有大量元素时才会发生。这似乎与元素的z-index有关。这是问题的一个例子:http://jsbin.com/iZAYaRI/26/edit将鼠标悬停在输出上以查看问题。有人知道为什么会这样吗？更新:看起来该元素并没有真正消失，而是移动了一千个像素左右。 最佳答案 在我的例子中，z平移属性大约为零。将我的零翻译从0更改为1解决了我的问题。在safari中运行的原始代码:transform:sca

文章目录一、translateZ转换分析1、translateZ转换对应的空间分析2、网页调试工具调试translateZ属性值二、代码示例-translateZ转换分析1、代码示例-translateZ为0的参照示例2、代码示例-translateZ为200示例一、translateZ转换分析1、translateZ转换对应的空间分析"透视"是模拟人的眼镜,观察物体在平面上的成像,translateZ转换,是物体沿着Z轴移动,也就是下图中的Z距离;Z轴的Z数值是物体和成像平面之间的距离,默认为0;如果Z增加,说明物体越靠近眼睛,在平面上成像范围更大;如果Z减小,说明物体越远离眼睛,在平面上成

当我将transform:scale(1.1);悬停在某个元素上时，图像变得模糊。如何修复这个错误？例子 最佳答案 试试这个，对我来说效果很好!img{-webkit-backface-visibility:hidden;-ms-transform:translateZ(0);/*IE9*/-webkit-transform:translateZ(0);/*Chrome,Safari,Opera*/transform:translateZ(0);} 关于html-如何修复变换比例上的模糊

当我将transform:scale(1.1);悬停在某个元素上时，图像变得模糊。如何修复这个错误？例子 最佳答案 试试这个，对我来说效果很好!img{-webkit-backface-visibility:hidden;-ms-transform:translateZ(0);/*IE9*/-webkit-transform:translateZ(0);/*Chrome,Safari,Opera*/transform:translateZ(0);} 关于html-如何修复变换比例上的模糊

我有这个html，它在Chrome、Safari和MobileSafari上运行良好。在android4.0.3上，translateZ没有对div显示任何(期望的)效果。除了translateZ，其他一切都正常。如果我使用translate3D(a,b,c)，那么同样只有X和Y值会影响渲染。有什么解决方法吗？ 最佳答案 根据caniuseandroid4及更高版本支持翻译。但是，我有一种预感，更具体的3D变换(如z轴上的平移)不会获得如此广泛的支持，尤其是在不支持webgl的浏览器中。我认为如果关键是有后备:transformie

当我尝试像这样在translateZ中设置百分比时:transform:translateZ(-100%);这是行不通的。它也不适用于相对视口(viewport)vh或vw.有什么办法可以做到这一点？我知道我可以简单地用JavaScript设置它，但是我在某个类中有很多这样的元素，包括稍后用JavaScript动态添加的元素。在CSS中做一些事情会方便得多。我看到了一些看起来像重复的东西，但我想要一种不需要多个元素来修复它的方法。除了附加到元素，即 最佳答案 好吧，阅读translateZ的w3c规范，不清楚是否有人考虑过应该在那里

在某些情况下，我认为translateZ和scale具有相同的效果，就像放大或缩小一样。我认为它们之间有一些计算联系，如果我知道它们中的一个值，比如translateZ(-1000px)和父perspective值，我可以计算吗与translateZ具有相同效果的scale值? 最佳答案 你是对的。当一个物体向您移动时(即translateZ)它看起来更大(即scale)。如图所示，perspective定义了观看者相对于容器的位置，translateZ定义了主体相对于容器的位置。从scale到translateZ(以及返回)的公式