问题标签 [webkit-transform]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
5379 浏览

javascript - 如何让 CSS/JavaScript 弹出窗口过渡?

我试图弄清楚如何使用 CSS 和少量 JavaScript 制作一个 div 弹出窗口。我已经能够点击一个链接,弹出一个框,当它打开时,它周围的屏幕是灰色的,如果你点击灰色,弹出窗口就会消失。但是,我不能让它淡入,而不仅仅是立即出现。这是我的代码:

重要的部分是这些:

来自 JavaScript:

来自CSS:

一切似乎都在工作,除了在 JavaScript 中-webkit-transform:scale(.5, .5);时被忽略,而只是没有做任何事情。如果你认为你知道一些可能有用的东西,你可以复制上面的代码块并修改它;它已经是一个完整的 HTML 文件。pop.style.webkitTransform = "scale(1, 1)"-webkit-transition:all .5s ease-in-out;

这个想法是让它褪色这样的事情:

0 投票
0 回答
3788 浏览

javascript - 在 X 和 Y 方向上下翻转/旋转文本

我想轻松翻转文本,就像这个页面正在做的那样:http: //papertiger.com/

我想尽可能简单地做到这一点,使用

这是我的代码:HTML:

JAVASCRIPT:

CSS:

就像现在一样,我可以根据需要旋转文本“First”。切换文本并将其旋转 Y 180 度(使其可读,因为它现在颠倒了),不起作用,这就是该行被注释的原因。

所以,我想我需要让文本旋转 X 和 Y 180 度,我该怎么做?rotate3d(1,1,0,180deg)不能那样工作。如果我先写rotateX,然后写rotateY,第一个会被覆盖。

...或者是我应该寻找的jQuery插件flippy somthing?

我试图制作一个jsfiddle。它不起作用,但可以在这里找到:http: //jsfiddle.net/EdNVw/

提前感谢您的任何建议!

0 投票
1 回答
594 浏览

css - 使用 webkit 3d 变换多次触发 CSS 悬停

当我在悬停时使用 webkit 3d 变换时,只有悬停区域的顶部 50% 有效,而底部 50% 则不稳定。我目前正在 Chrome (31.0.1650.63) 上进行测试。它是一个错误吗?有什么解决方法吗?

尝试将鼠标放在 div 的顶部,然后慢慢将其移至底部。

HTML

CSS

http://jsfiddle.net/4P53y/

0 投票
1 回答
74 浏览

javascript - 检索 webkit-transform 的特定值(比例)以创建条件规则

我的 html 代码中有一个具有这种样式的 div:

的最后一个值scale从 1 到 2,这是我使用 div 上的滚动进行的缩放。

我需要在Javascript中创建一个条件规则,在规模超过1.5的情况下,但我该怎么做呢?

其他值可能会改变,所以我不能重写整个字符串......

就像是:

0 投票
1 回答
796 浏览

css - 悬停时更大的图像 - CSS3 Internet Explorer

有谁知道如何得到这个

在 Internet Explorer 中工作?

已经在使用规范化 css!

谢谢!

0 投票
1 回答
290 浏览

javascript - Android 4.x HTML 缩小包含 iFrame 的 div 会导致 iFrame 内容被截断

我有一个包含 iFrame 的 div 网页。我已应用 webkit-transform 来缩小 div:。在桌面浏览器和 iOS 上,这可以正常工作,但在 Android 4.0.x 上,iFrame 的内容会被截断。截断量与发生的缩放量成正比,即如果我将 div 缩小到 0.5,则只有 50% 的缩小 iFrame 可见。

您可以在 Android 股票浏览器上测试此链接。iFrame 覆盖了正确的区域,但可见内容甚至是该区域的 50%。有趣的是,如果比例大于 1,则不会出现此问题。

此行为在所有 Android 4.0 设备和某些 4.1 设备上均无故障复制。

请建议任何解决此问题的方法。

0 投票
1 回答
214 浏览

javascript - 无法从 WebKitCSSMatrix 中获取价值

我需要获取 div 的 translate3d 属性的 x 和 y 值,因为我使用以下代码:

当我在 Chrome 的检查器中使用断点来查看值是否正确时,它工作正常。如果我在代码中输入一个警报()它工作正常,但如果代码中没有这两个“停止”,则verticalOffset和horizo​​ntalOffset的值为0。

0 投票
1 回答
1019 浏览

css - 在水平滚动上旋转图像

我正在使用此代码让图像在滚动时旋转,并且效果很好:

我使用 .scrollLeft 而不是 .scrollTop,因为我的网站是水平滚动的。我从以下网址获得此代码: http: //demosthenes.info/blog/718/Rotating-Elements-With-Page-Scroll-In-JQuery

本网站上的示例有 2 张图片。它们以不同的速度转向相反的方向。我怎样才能做到这一点?我查看了演示站点的源代码并注意到 -webkit-transform。我想这与它有关吗?有人可以帮忙吗?

我希望我的图像转向另一侧,并且我希望它以较慢的速度转动。

0 投票
0 回答
48 浏览

internet-explorer - 在 Firefox 中使用 webkit-transform 旋转

大家好,我有以下代码

在 Chrome 中工作正常,但没有其他浏览器,谁能告诉我如何让它在 FF、IE 等中工作

tjamls

0 投票
1 回答
1872 浏览

html - 翻转后如何保持Div与css一起旋转?

我找到了这个关于如何用 CSS 翻转 div 的教程。你可以在这里找到结果。现在的问题是,我想在悬停后将拼图块翻转到后面,这样背面的信息仍然可见。现在我在使用 css3 方面不是很擅长。因此,非常感谢您对实现期望的任何帮助!

这是我正在使用的代码:

html:

CSS: