问题标签 [webkit-transform]

我有一些具有绝对位置并使用 CSS 进行旋转和缩放的 DIV（也可以是图像）元素。

如何计算元素占据的总宽度和高度（当时的矩形）。检查offset()ofposition()并没有给我正确的结果。

如果可能的话，我需要一个 Javascript/Jquery 或数学的解决方案，这样如果没有任何其他选项，我可以自己计算它。谢谢。

我试过的：

• 使用偏移量，但它没有给我正确的观点
• position()，但它不考虑旋转

一个元素的 CSS 例如：

This is weird. I'm playing with device orientation but can't seem to get rotateX and rotateY to work in Safari (iOS 8.0.2).

But! if I save it to my home screen with apple-web-app-capable meta tag it works fine.

This is my script:

you can see it here live (on your iPhone): http://kohlin.net/matte/orientation.html Then try saving it to your home screen.

Any clues? A bug?

在http://www.thoughtspot.com/#forrester上有一张三张纸的图像，上面写着“forrester”。当您将鼠标悬停在它们上方时，它们会略微放大，然后当您将鼠标移开时，它们会缩小。我正在使用 chrome，我看到应用了以下属性：

-webkit 变换：比例（1,1）；

但这似乎仅表明没有缩放/原始大小。我不知道缩放是如何发生的。谁能给我解释一下这个？

我真的可以使用一些帮助。在此站点http://medicalaid.org上，在另一位开发人员离开后，我一直在尝试修复它。我遇到的最后一个问题是我无法在 IE10 中加载一半的 webkit 动画，所有其他浏览器都可以正常工作，几乎所有内容 div 都有它们。我试过重写css，例如：

而且我什么也做不了，如果有人可以看看并帮助我，那就太好了

这个问题与另一个问题有关：https ://stackoverflow.com/questions/26948677/translate-coordinates-to-its-equivalent-in-scale1没有人给出回应，但它不再重要，因为它已解决，在至少那部分。我得到正确的 x 和 y 值。

我把你放在一个情况下，我正在开发的应用程序允许用户创建一个具有 6 个不同背景的图像，其中包含有趣的人物，没有脸，这样用户就可以放一张他/她的脸的照片。为此，他们可以拖动、捏合以缩放和旋转图像。拖动和捏缩放是在控制之下，但是当图像旋转时，我无法在确切的坐标中匹配图像。图像总是上升一点。

一个例子，我得到的值是：

x：30，y：80，比例：0.5，度：40。

因此，当我在画布中绘制旋转图像时，y 似乎会根据度数上升一点。度数少，升得少。

我正在使用这个函数来绘制旋转的图像：

}

PD：要指出的是，如果我不旋转图像，它会在正确的位置完美匹配。

如何获得旋转图像的正确 x 和 y 值？

I am building a slide menu.

The menu is long and I need to be able to scroll inside of it, so I have set overflow-y: scroll on it.

I am using -webkit-transform (and variants on other browsers) as the transition property.

Now I can't scroll inside the div, using the scrollwheel when on top of the div will make the whole page scroll.

If I change the menu's behavior and transition the right property (setting the menu to right: -320px and animating it back to right: 0), the scroll works.

This bug only happends in Safari, it works fine in Chrome and other browsers. Also works on iOS.

Anybody know a workaround? Anyone experienced this issue before? I can't seem to find any info on it. Thank you.

我有一个 div，其中有跨度，它们的内容由单个字母组成

如果您只是应用旋转或字母间距，它看起来仍然可以

如果您同时应用旋转和字母间距，则它所应用的跨度似乎被推高了。

结果可以在这个 JSFiddle中看到

我可以使用其他版本的 JSFiddle 中的填充来纠正它

但是无论如何应用CSS组合而没有跨度似乎被推高？

"translateX(-50%) scale(1.2)"给定一个具有 N 个变换函数的字符串

1）如何匹配名称["translateX", "scale"]？

2）如何匹配这些值["-50%", "1.2"]？

假设我有一个div动态添加translateX的translateY值。

我想添加rotateY(20deg)到当前的转换中，但通过应用它 element.style.webkitTransform = "rotateX(20deg)"会丢失其他值。

有没有办法在rotateY不丢失translateX和translateY转换的情况下添加？

有没有办法可以渲染任何网页以加载角度偏移？

虽然我知道你可以做一个网络转换，比如：javascript: document.body.setAttribute( "style", "-webkit-transform: rotate(-90deg);");它适用于许多网站，但我追求的是一个包罗万象的解决方案。

为清晰起见的示例问题：

1.) Netflix.com的播放器无法旋转

2.) Twitch.tv的播放器保持完整，但播放器的尺寸被扭曲导致宽屏夸大

3.) Youtube和Google的页面在旋转后在顶部和底部都有巨大的空白。

我只是想知道是否有人知道一种方法来避免不得不做 webkit 动画并简单地加载（请原谅我更好的词）一个网页转向侧面。

谢谢！