问题标签 [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 - Javascript中绝对旋转元素的周围矩形和高度
我有一些具有绝对位置并使用 CSS 进行旋转和缩放的 DIV(也可以是图像)元素。
如何计算元素占据的总宽度和高度(当时的矩形)。检查offset()
ofposition()
并没有给我正确的结果。
如果可能的话,我需要一个 Javascript/Jquery 或数学的解决方案,这样如果没有任何其他选项,我可以自己计算它。谢谢。
我试过的:
- 使用偏移量,但它没有给我正确的观点
- position(),但它不考虑旋转
一个元素的 CSS 例如:
ios - Mobile Safari not showing CSS transform rotateX and rotateY only rotateZ
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?
html - 这个 CSS 缩放效果是如何实现的?
在http://www.thoughtspot.com/#forrester上有一张三张纸的图像,上面写着“forrester”。当您将鼠标悬停在它们上方时,它们会略微放大,然后当您将鼠标移开时,它们会缩小。我正在使用 chrome,我看到应用了以下属性:
-webkit 变换:比例(1,1);
但这似乎仅表明没有缩放/原始大小。我不知道缩放是如何发生的。谁能给我解释一下这个?
css - IE10 No Webkit 不工作
我真的可以使用一些帮助。在此站点http://medicalaid.org上,在另一位开发人员离开后,我一直在尝试修复它。我遇到的最后一个问题是我无法在 IE10 中加载一半的 webkit 动画,所有其他浏览器都可以正常工作,几乎所有内容 div 都有它们。我试过重写css,例如:
而且我什么也做不了,如果有人可以看看并帮助我,那就太好了
javascript - 在画布中以正确的坐标 (x,y) 旋转图像
这个问题与另一个问题有关: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 值?
safari - Can't scroll inside a div after applying -webkit-transform in Safari
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.
css - CSS组合:应用字母间距和旋转弹出span
我有一个 div,其中有跨度,它们的内容由单个字母组成
如果您只是应用旋转或字母间距,它看起来仍然可以
如果您同时应用旋转和字母间距,则它所应用的跨度似乎被推高了。
结果可以在这个 JSFiddle中看到
我可以使用其他版本的 JSFiddle 中的填充来纠正它
但是无论如何应用CSS组合而没有跨度似乎被推高?
javascript - CSS3 转换字符串上的正则表达式 (Regex)
"translateX(-50%) scale(1.2)"
给定一个具有 N 个变换函数的字符串
1)如何匹配名称["translateX", "scale"]
?
2)如何匹配这些值["-50%", "1.2"]
?
javascript - 向元素上已经存在的当前变换添加变换值?
假设我有一个div
动态添加translateX
的translateY
值。
我想添加rotateY(20deg)
到当前的转换中,但通过应用它
element.style.webkitTransform = "rotateX(20deg)"
会丢失其他值。
有没有办法在rotateY
不丢失translateX
和translateY
转换的情况下添加?
javascript - 横向渲染网页的方式(90 度等)
有没有办法可以渲染任何网页以加载角度偏移?
虽然我知道你可以做一个网络转换,比如:javascript: document.body.setAttribute( "style", "-webkit-transform: rotate(-90deg);");
它适用于许多网站,但我追求的是一个包罗万象的解决方案。
为清晰起见的示例问题:
1.) Netflix.com的播放器无法旋转
2.) Twitch.tv的播放器保持完整,但播放器的尺寸被扭曲导致宽屏夸大
3.) Youtube和Google的页面在旋转后在顶部和底部都有巨大的空白。
我只是想知道是否有人知道一种方法来避免不得不做 webkit 动画并简单地加载(请原谅我更好的词)一个网页转向侧面。
谢谢!