问题标签 [webkit-transform]

首先，这里有一个 jsfiddle 来说明我的问题： http: //jsfiddle.net/EKxkx/ 我不知道为什么在 jsfiddle 上，css 翻译只适用于 chrome，但在实时版本上，问题只是在 Firefox 下可见，如下所示：http: //helveticventure.com/startupweekend/v4/test.html

我正在使用 ez-css 框架 (ez-css.org)。具有以下布局：

当我放一个 -webkit-transform: translate(0, 30px); 对于块 2 和块 3，它们的行为方式不同。

当第 2 块在第 4 块上方移动时，第 3 块在第 4 块下方移动。我要归档的行为是第 3 块使用的 on。两个块都在第 4 块下方移动。但我真的不知道如何.

谢谢你的帮助！

埃里克

我在下面编写了代码来翻转图像。我正在设置-webkit-transform=rotateY(180deg)，但再次在click我想将图像恢复到原始位置的事件中。我尝试-180了价值，但它不起作用。

请帮忙。

我正在尝试使用 webkit 动画应用简单的下雨效果，在 ipad 2 上运行良好，没有问题，但在较新的视网膜显示 ipad 上运行非常缓慢：

我已经看到提到使用 3d 变换来触发 ios 中的硬件加速，但是当将它们直接应用到此类时，动画会停止，我什至不确定这些是否会有所作为。

我知道这个问题可能是iOS Webkit 动画性能仅在视网膜显示上受到影响的重复，但很久以前就有人问过这个问题，但没有真正的结论。

这个问题有什么解决办法吗？或者任何可以稍微提高性能的东西？

是否有任何 jQuery 解决方案可以找到确切的显示高度-webkit-transform: scale(0.7851);

价值可能会有所不同，这scale就是为什么要寻找合适的解决方案

不幸的是，测试了这些选项还没有找到解决方案:(

我认为这个问题只能解决一个数学基础；）

我有一个圆圈，其中有一个菜单，其中的对象位于圆圈内的圆圈中。当用户向任何方向拖动他们的手指时，圆圈会随着手指旋转，但是，当用户旋转轮子并碰巧触摸到其中的一个对象（用作链接）时，圆圈会“刹车”并停止旋转。我需要取消活动气泡。我知道我需要使用 event.stopPropagation 并处理事件处理程序中的捕获，但是我在使用我发现的 jQuery 插件（Touchy）实现它时遇到了问题。

*确保您在 Chrome 中查看设置为模拟触摸事件的覆盖，并且开发人员控制台已打开 Mac 上的 Command+Option+i ！！！*

http://jsfiddle.net/ymtV3/

*确保您在 Chrome 中查看设置为模拟触摸事件的覆盖，并且开发人员控制台已打开 Mac 上的 Command+Option+i ！！！*

......请参阅 JS Fiddle 上的其余内容

当您transform在 div 上使用时，绝对定位不再像您预期的那样工作，并且似乎需要手动计算。例如，当您希望 div 位于容器底部时，您可以：

但是如果你转换这个 div 就像-webkit-transform:rotateX(angle);它不会在容器的底部一样。容器之间的某个地方取决于它的大小。

我创建 jsfiddle 来说明这一点，并展示我想要实现的目标：http: //jsfiddle.net/9NHJt/

这是我使用的代码：

那么，有没有办法在没有 javascript 的情况下解决这个问题？或者如何用js计算正确的底部位置？

我遇到了背景图像无法在 iPad 上正确呈现的问题。提供的解决问题的答案是添加-webkit-transform: translateZ(0);到id解决问题但导致另一个问题的答案。在一个页面（这是一个非常长的页面）上，内容在页面中途停止加载。如果我删除-webkit-transform: translateZ(0);问题停止（后台问题也再次出现）。为什么会-webkit-transform: translateZ(0);阻止页面加载？

带有 webkit-transform 的 CSS：

笔记：

• 这发生在运行 iOS 6.1.3 的 iPad Mini 上
• 此问题不会出现在 iPhone 4（相同版本的 iOS）或 Chrome 中。
• 这确实会在 Safari 5.1（我正在运行 Windows）中引起重大问题。

我编写了下面的代码来缩放所有内容以及浏览器大小，以便所有内容始终可见（在放大或缩小的版本中）。

该代码在 Firefox 中运行良好，但在 Chrome 和 Safari 中存在一些不一致（我一般假设基于 Webkit 的浏览器，因为它们的行为似乎相似）。

例如，如果我在最大化浏览器窗口的情况下加载我的页面，它会在调整大小时很好地缩放。但是，如果我在调整浏览器大小时刷新页面，则会切断一大块（即它以原始大小加载而未应用缩放）。但是，如果我在调整浏览器大小时重新加载页面（通过按地址栏中的回车键），所有内容都会正确显示并相应缩放。但是，如果我点击刷新按钮，切断再次发生。

我已经尝试添加一个setTimeout（具有不同的持续时间值），但这不起作用。有谁知道我该如何解决这个问题？谢谢。

我有一个显示在固定 div 中的图像。

我正在使用 -webkit-transform 属性来缩放并导航到缩放的图像（不需要其他浏览器。只是 webkit）。所有的东西都是用 javascript/jquery 完成的。导航适用于任何方向。最大缩放比例为 10。

例如：

一切正常。

困难在不同的地方：

图像上有一个圆点。我知道这个点的坐标和它的半径（例如X-100px,Y-100px,R-10px）；这些坐标与图像相关。

问题：

如果图像被缩放，我如何确定这个圆点是否可见？如何确定图像的哪个区域可见？如何确定其在调整大小状态下的实际坐标。请不要犹豫，看看显示所需的示例图像：

更新：

不幸的是，下面给出的解决方案并不完全正确。通过将 height() 的 jquery 值与缩放率相乘，您将无法获得准确的结果。我自己找到了解决方案。有以下 javascript（不是 jquery）属性：

element.getBoundingClientRect

此属性反映调整后图像的实际尺寸并返回实际位置的真实坐标。jquery的用法如下：

我希望它对那些将来遇到问题的人有用:)

我正在使用代码来更改元素的 -webkit-transform 属性。但是，我想在不播放过渡动画的情况下执行此操作：例如，我想从 transformX(-300px) 转到 transformX(0) 而没有中间的幻灯片。这是我到目前为止的代码，但它是无效的。我必须将“list-style-type”设置为 none，否则 step 函数将无法运行。

有任何想法吗？