问题标签 [webkit-transform]

我正在开发响应式网站。在向任何表单字段和键盘隐藏提供输入时，打开Samsung Gallaxy SII和Android 浏览器滚动到顶部。DUOS

在哪里使用或不使用 -webkit-backface-visibility: hidden;

此问题仅在 Android 默认浏览器上，不在 Firefox、Opera 和 Chrome 上

我这里有一段 CSS，

每当我将鼠标悬停在 img 上时，弹跳动画就会播放，但是当我将鼠标从 img 上移开时，幻灯片动画会再次播放。我只想让幻灯片在页面加载时播放。我该怎么做呢？提前致谢！

我为 Android 和 iPhone 编写了一个 JQM Web 应用程序，该应用程序在一个自定义的本地容器中运行，该容器带有一堆供应商库，包括一个自定义版本的 iScroll。最近，我们从供应商处升级了库，包括 iScroll。现在，iPhone 用户在某些情况下会看到视觉失真（截图：http: //i.stack.imgur.com/mCUyB.png）。滚动后失真会自行纠正。

症状：

• 屏幕右侧正在绘制水平线
• iscroll div 中的元素超出了右侧。（请注意，div 在左侧有圆形边缘，但在右侧没有。这也会在滚动后自行纠正。

当这两个条件都满足时，它会触发失真：

• 下载更大的数据集后，导致更多 DOM 元素附加到 iscroller
• 当用户向后导航时。本质上，当 JQM 页面及其附加元素从隐藏变为可见时。

div iscroll的CSS代码：

还有一些观察：

• 我怀疑iscroll是因为以前的iscroll版本没有使用-webkit-transform。
• 在 iPhone 上，-webkit-transform: translate3d是硬件加速的。
• 失真仅在 iPhone 上，不在 Android 上。

不确定我应该提供哪些其他信息。我可以提供 iscroll 的代码，但它是 800 行代码。

这是我在此的头一篇博文。要温柔。

我已经申请：

到“关于”图像：

http://www.clementinekeithroach.co.uk/home/

然而，与网站上的所有其他图像不同，它们会自然褪色，然后在悬停时增加它们的黑暗，这一张拒绝让步。

有人可以解释我哪里出错了吗？

我正在为我正在开发的移动网站制作一些动画。我目前正在使用 CSS 过渡，但是当我预览小部件（手风琴）时，它的动画效果根本不流畅（在 iPhone 上）。

我知道 2D/3D 变换（翻译）在硬件加速设备上运行良好。有什么东西可以用来使 DIV 的高度平稳增长吗？

这是一些示例代码：

任何帮助是极大的赞赏。谢谢

我原始问题的简化形式。给定下面的代码（对于 Chrome/Safari），如何在不知道外部 div 转换矩阵中的值的情况下使内部 div 中的“文本”出现在左上角？

无论我在 CSS 方面尝试什么，我都不能让内部 div 忽略外部 transform()。从规范看来 -webkit-transform: none 应该清除转换堆栈和/或 position: fixed; 但没有什么对我有用。我已经在 Firefox ('transform') 中尝试过相关代码，但存在同样的问题。

原始公式：我正在尝试使用D3JS 绘制一个 SVG 容器，该容器设置为 google.maps.OverlayView 并直接定位在我的 google 地图容器顶部，两者均为 600x400 固定位置在左上角。您可以在此处查看 gist 中的代码。

这工作正常，直到您拖动地图，此时它正在重新定位我的 SVG 容器，显然是由于父 div 之一中的 -webkit-transform: matrix(...) ：如果我在 Chrome DevTools 中关闭该行，我的叠加视图回到了正确的位置。我需要覆盖视图与地图视口保持对齐，因为我在地图移动时刷新内容。

我有 2 个元素。一个在 CSS 中按比例缩小

另一个由 jQuery 内联缩放

在按比例缩小后，我需要获取 secondElement 和 firstElement 的宽度和高度（以像素为单位）。我尝试了一切，我真的不知道为什么我不能得到这个。有人有想法么？谢谢

我有一些可以在最新版本的 Firefox 中运行的代码（不确定 IE，我怀疑不是，但我不使用 IE）......并且刚刚意识到它在 Chrome 中不起作用，我需要添加供应商前缀. 我会及时到达 mozzilla 等，但现在我只想让它在 chrome 中工作。在 FF 而不是 chrome 中工作的例子可以在这里看到http://fourthperimetertactical.com/goods.php

更新：下面的代码现在可以像 Firefox/Chrome/Opera 中的旋转木马一样旋转运动（最新版本，未进行回溯测试）。

这很粗糙，我还在整理造型、尺寸等……但动作本身就像一种魅力。

于 2013 年 9 月 25 日 5:15 更新

我提前感谢任何人在它搞砸的地方的任何指示。除了实际正确的旋转之外，css 做了它应该做的一切。

假设我有一个基本上是 2D 地图的图像元素，并且我在其上应用了以下 CSS 转换（使用 jQuery）：

我应用了这种变换来在 2D 图像上获得“假透视”效果，现在我有一组映射到该图像中的坐标，它们指向其中的 X、Y 位置

我想知道的是，如果有任何技术或方法可以让我计算给定这个变换的每个点的“新”X，Y 位置

澄清一下，我对计算机图形学理论一无所知，我只是试图开发这个概念证明，并试图找到给 HTML 图像这种透视效果的最佳方法，同时保持图像的交互性，让用户单击映射到该图像的每个点

更新 1

我找到了一个名为“getBoundingClientRect”的方法，它在转换后返回矩形坐标（https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect），我想我需要应用某种给定我使用这个新矩形的原始点的矩阵变换对吗？抱歉，我真的不懂计算机图形学理论，只是想尝试这种方式看看它会起作用

我正在尝试使用旋转在 html 中显示文本以将其显示为 45 度（或足够接近）

不幸的是，它看起来一点也不好看。有谁知道解决此问题的方法，或者可能是在 45 度时比其他字体呈现更好的字体？

以下示例 http://jsfiddle.net/stevewill61/3WpfP/

jsfiddle中横幅的CSS如下

这是要求的图片

http://oi39.tinypic.com/2607ifa.jpg