问题标签 [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.
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;
这个想法是让它褪色这样的事情:
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/
提前感谢您的任何建议!
css - 使用 webkit 3d 变换多次触发 CSS 悬停
当我在悬停时使用 webkit 3d 变换时,只有悬停区域的顶部 50% 有效,而底部 50% 则不稳定。我目前正在 Chrome (31.0.1650.63) 上进行测试。它是一个错误吗?有什么解决方法吗?
尝试将鼠标放在 div 的顶部,然后慢慢将其移至底部。
HTML
CSS
javascript - 检索 webkit-transform 的特定值(比例)以创建条件规则
我的 html 代码中有一个具有这种样式的 div:
的最后一个值scale
从 1 到 2,这是我使用 div 上的滚动进行的缩放。
我需要在Javascript中创建一个条件规则,在规模超过1.5的情况下,但我该怎么做呢?
其他值可能会改变,所以我不能重写整个字符串......
就像是:
css - 悬停时更大的图像 - CSS3 Internet Explorer
有谁知道如何得到这个
在 Internet Explorer 中工作?
已经在使用规范化 css!
谢谢!
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 设备上均无故障复制。
请建议任何解决此问题的方法。
javascript - 无法从 WebKitCSSMatrix 中获取价值
我需要获取 div 的 translate3d 属性的 x 和 y 值,因为我使用以下代码:
当我在 Chrome 的检查器中使用断点来查看值是否正确时,它工作正常。如果我在代码中输入一个警报()它工作正常,但如果代码中没有这两个“停止”,则verticalOffset和horizontalOffset的值为0。
css - 在水平滚动上旋转图像
我正在使用此代码让图像在滚动时旋转,并且效果很好:
我使用 .scrollLeft 而不是 .scrollTop,因为我的网站是水平滚动的。我从以下网址获得此代码: http: //demosthenes.info/blog/718/Rotating-Elements-With-Page-Scroll-In-JQuery
本网站上的示例有 2 张图片。它们以不同的速度转向相反的方向。我怎样才能做到这一点?我查看了演示站点的源代码并注意到 -webkit-transform。我想这与它有关吗?有人可以帮忙吗?
我希望我的图像转向另一侧,并且我希望它以较慢的速度转动。
internet-explorer - 在 Firefox 中使用 webkit-transform 旋转
大家好,我有以下代码
在 Chrome 中工作正常,但没有其他浏览器,谁能告诉我如何让它在 FF、IE 等中工作
tjamls