webkit-transform

Checking hardware acceleration availability? (Testing available)

由 别等时光非礼了梦想. 提交于 2019-12-01 07:37:06
I've written CSS that uses -webkit-transform, -webkit-perspective and several similar. My design looks the bees knees on machines where hardware acceleration is available but is practically unusable when not. How can I check hardware acceleration availability and provide fallback CSS? Side note: Run chrome://gpu-internals/ to manually check for availability. Sadly, the answer seems to be 'you can't (yet)'. The Modernizr project lists HW acceleration amongst its 'undetectables': https://github.com/Modernizr/Modernizr/wiki/Undetectables . Part of the problem seems to be that HW acceleration is

How to get screen position of CSS3-3d transformed elements?

由 混江龙づ霸主 提交于 2019-11-28 23:25:48
I have a very complicated site built on CSS3 that has html elements 3d-transformed, rotated, flipped, flopped and just generally distorted. I'm trying to figure out the on-screen location of one of these elements and don't see any way to do so. I was wondering if anyone has any ingenious ideas. Alternatively, if anyone can explain the math behind -webkit-perspective , I can figure out the position as that's the only thing I'm not sure how to model. Have you tried using getBoundingClientRect() ? I've used it successfully in the past to calculate the dimensions of elements that have been

jQuery draggable and -webkit-transform: scale();

由 旧时模样 提交于 2019-11-28 10:23:35
I have a situation where inside a div there are draggable items. However, when the parent div is scaled using -webkit-transform , the draggable obviously stops working properly. I've reproduced the scenario here . As you can see, the draggable item moves relative to the document, even though the parent is in an entirely different scale. I have the scale ( 1.5 in the example) as a variable in JS, so I can use that, but where? I'd need to divide the dragging distance by the scale, right? Where could I do this? Edit: I've tried setting a function to drag -event, but haven't been able to figure

webkit-transform alternative for Firefox

由 只谈情不闲聊 提交于 2019-11-28 07:59:15
问题 Is there any alternative to -webkit-transform CSS rules in Firefox? 回答1: Yes, it's called -moz-transform. Check out this article http://www.zachstronaut.com/posts/2009/02/17/animate-css-transforms-firefox-webkit.html Here is the official documentation: https://developer.mozilla.org/en/CSS/-moz-transform 来源： https://stackoverflow.com/questions/7572884/webkit-transform-alternative-for-firefox

Add a transform value to the current transforms that are already on the element?

由 妖精的绣舞 提交于 2019-11-28 02:04:30
Let's say I have a div that had translateX and translateY values added dynamically. <div class="object child0" style="-webkit-transform: translateX(873.5px) translateY(256px); width: 50px; height: 50px;"> I want to add rotateY(20deg) to the current transforms, but applying it via element.style.webkitTransform = "rotateX(20deg)" loses the other values. Is there a way to add the rotateY without losing the translateX and translateY transforms? You could use the += operator to append the rotateX(20deg) to the already existing transformation. el.style.webkitTransform += "rotateX(20deg)"; Note: I

css @-moz-keyframes animation not working on firefox 18.0.1

由 徘徊边缘 提交于 2019-11-28 00:21:42
css @-moz-keyframes animation on firefox 18.0.1 is not working, I have checked this animation on previous version( forgot version previous number) , it was working, Here is the animation <html> <head> <style type="text/css"> @-webkit-keyframes animation { 0% { -webkit-transform:translate(100px,100px) scale(1); } 50% { -webkit-transform:translate(00px,00px) scale(2); } 100% { -webkit-transform:translate(100px,100px) scale(1); } } @-moz-keyframes animation_m { 0% { -moz-transform:translate(100px,100px) scale(1); } 50% { -moz-transform: translate(00px,00px) scale(2); } 100% { -moz-transform

How to get screen position of CSS3-3d transformed elements?

由 梦想的初衷 提交于 2019-11-27 14:47:27
问题 I have a very complicated site built on CSS3 that has html elements 3d-transformed, rotated, flipped, flopped and just generally distorted. I'm trying to figure out the on-screen location of one of these elements and don't see any way to do so. I was wondering if anyone has any ingenious ideas. Alternatively, if anyone can explain the math behind -webkit-perspective , I can figure out the position as that's the only thing I'm not sure how to model. 回答1: Have you tried using

Wonky text anti-aliasing when rotating with webkit-transform in Chrome

由 ⅰ亾dé卋堺 提交于 2019-11-27 06:54:10
I'm rotating an element using -webkit-transform: rotate() and in Chrome 14.0.835.2 dev-m it's doing some really weird stuff to the text inside the element. It reminds me of a similar effect you get in Photoshop when you rotate text using "smooth" anti-aliasing instead of "crisp". Anyone know what's going on here? Is it specific to this webkit or Chrome version or is there something I can do to fix it? (It's also not anti-aliasing the borders between list elements) Here's the CSS: div.right-column.post-it { position: relative; width: 240px; background-color: #fe9; padding: 20px; -webkit

jQuery draggable and -webkit-transform: scale();

由 不羁的心 提交于 2019-11-27 03:35:37
问题 I have a situation where inside a div there are draggable items. However, when the parent div is scaled using -webkit-transform , the draggable obviously stops working properly. I've reproduced the scenario here. As you can see, the draggable item moves relative to the document, even though the parent is in an entirely different scale. I have the scale ( 1.5 in the example) as a variable in JS, so I can use that, but where? I'd need to divide the dragging distance by the scale, right? Where

Add a transform value to the current transforms that are already on the element?

由 我是研究僧i 提交于 2019-11-26 22:06:04
问题 Let's say I have a div that had translateX and translateY values added dynamically. <div class="object child0" style="-webkit-transform: translateX(873.5px) translateY(256px); width: 50px; height: 50px;"> I want to add rotateY(20deg) to the current transforms, but applying it via element.style.webkitTransform = "rotateX(20deg)" loses the other values. Is there a way to add the rotateY without losing the translateX and translateY transforms? 回答1: You could use the += operator to append the
订阅 webkit-transform