问题标签 [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.
css - CSS3 翻译问题溢出
首先,这里有一个 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 块下方移动。但我真的不知道如何.
谢谢你的帮助!
埃里克
jquery - 旋转 180 度后将图像返回到原始位置
我在下面编写了代码来翻转图像。我正在设置-webkit-transform=rotateY(180deg)
,但再次在click
我想将图像恢复到原始位置的事件中。我尝试-180
了价值,但它不起作用。
请帮忙。
ios - ipad 视网膜显示 webkit 动画性能较差
我正在尝试使用 webkit 动画应用简单的下雨效果,在 ipad 2 上运行良好,没有问题,但在较新的视网膜显示 ipad 上运行非常缓慢:
我已经看到提到使用 3d 变换来触发 ios 中的硬件加速,但是当将它们直接应用到此类时,动画会停止,我什至不确定这些是否会有所作为。
我知道这个问题可能是iOS Webkit 动画性能仅在视网膜显示上受到影响的重复,但很久以前就有人问过这个问题,但没有真正的结论。
这个问题有什么解决办法吗?或者任何可以稍微提高性能的东西?
javascript - CSS3如何计算缩放后的高度和宽度
是否有任何 jQuery 解决方案可以找到确切的显示高度-webkit-transform: scale(0.7851);
价值可能会有所不同,这scale
就是为什么要寻找合适的解决方案
不幸的是,测试了这些选项还没有找到解决方案:(
我认为这个问题只能解决一个数学基础;)
javascript - e.stopPropagation 在 webkit-transform 旋转期间对子级进行传播?
我有一个圆圈,其中有一个菜单,其中的对象位于圆圈内的圆圈中。当用户向任何方向拖动他们的手指时,圆圈会随着手指旋转,但是,当用户旋转轮子并碰巧触摸到其中的一个对象(用作链接)时,圆圈会“刹车”并停止旋转。我需要取消活动气泡。我知道我需要使用 event.stopPropagation 并处理事件处理程序中的捕获,但是我在使用我发现的 jQuery 插件(Touchy)实现它时遇到了问题。
*确保您在 Chrome 中查看设置为模拟触摸事件的覆盖,并且开发人员控制台已打开 Mac 上的 Command+Option+i !!!*
*确保您在 Chrome 中查看设置为模拟触摸事件的覆盖,并且开发人员控制台已打开 Mac 上的 Command+Option+i !!!*
......请参阅 JS Fiddle 上的其余内容
css - 如何计算转换后的div的绝对位置
当您transform
在 div 上使用时,绝对定位不再像您预期的那样工作,并且似乎需要手动计算。例如,当您希望 div 位于容器底部时,您可以:
但是如果你转换这个 div 就像-webkit-transform:rotateX(angle);
它不会在容器的底部一样。容器之间的某个地方取决于它的大小。
我创建 jsfiddle 来说明这一点,并展示我想要实现的目标:http: //jsfiddle.net/9NHJt/
这是我使用的代码:
那么,有没有办法在没有 javascript 的情况下解决这个问题?或者如何用js计算正确的底部位置?
ios - -webkit-transform 阻止页面加载
我遇到了背景图像无法在 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)中引起重大问题。
javascript - 刷新页面时在 Chrome 和 Safari 中转换 scale() 不一致
我编写了下面的代码来缩放所有内容以及浏览器大小,以便所有内容始终可见(在放大或缩小的版本中)。
该代码在 Firefox 中运行良好,但在 Chrome 和 Safari 中存在一些不一致(我一般假设基于 Webkit 的浏览器,因为它们的行为似乎相似)。
例如,如果我在最大化浏览器窗口的情况下加载我的页面,它会在调整大小时很好地缩放。但是,如果我在调整浏览器大小时刷新页面,则会切断一大块(即它以原始大小加载而未应用缩放)。但是,如果我在调整浏览器大小时重新加载页面(通过按地址栏中的回车键),所有内容都会正确显示并相应缩放。但是,如果我点击刷新按钮,切断再次发生。
我已经尝试添加一个setTimeout
(具有不同的持续时间值),但这不起作用。有谁知道我该如何解决这个问题?谢谢。
javascript - -webkit-transform scale:如何获取可见区域的坐标
我有一个显示在固定 div 中的图像。
我正在使用 -webkit-transform 属性来缩放并导航到缩放的图像(不需要其他浏览器。只是 webkit)。所有的东西都是用 javascript/jquery 完成的。导航适用于任何方向。最大缩放比例为 10。
例如:
一切正常。
困难在不同的地方:
图像上有一个圆点。我知道这个点的坐标和它的半径(例如X-100px,Y-100px,R-10px);这些坐标与图像相关。
问题:
如果图像被缩放,我如何确定这个圆点是否可见?如何确定图像的哪个区域可见?如何确定其在调整大小状态下的实际坐标。请不要犹豫,看看显示所需的示例图像:
更新:
不幸的是,下面给出的解决方案并不完全正确。通过将 height() 的 jquery 值与缩放率相乘,您将无法获得准确的结果。我自己找到了解决方案。有以下 javascript(不是 jquery)属性:
此属性反映调整后图像的实际尺寸并返回实际位置的真实坐标。jquery的用法如下:
我希望它对那些将来遇到问题的人有用:)
jquery - jQuery、CSS、-webkit-transform:没有动画
我正在使用代码来更改元素的 -webkit-transform 属性。但是,我想在不播放过渡动画的情况下执行此操作:例如,我想从 transformX(-300px) 转到 transformX(0) 而没有中间的幻灯片。这是我到目前为止的代码,但它是无效的。我必须将“list-style-type”设置为 none,否则 step 函数将无法运行。
有任何想法吗?