css-transforms | 易学教程

backside-visibility not working in IE10 - works fine in webkit

阅读更多关于 backside-visibility not working in IE10 - works fine in webkit

问题 I'm building a simple pure-css 'card flip' animation, it has to work in IE10, but sadly what I've written doesn't. jsFiddle demo here or sample html zip here I can see that backside-visibility works in IE10 from their demo here so maybe I've just overlooked something stupid, maybe a fresh pair of eyes might help! Thanks in advance! 回答1: Well some Microsoft IE devs saw my tweet and jumped in with a fix already! Apparently IE10 does not support preserve-3d, and they whipped up this jsFiddle

CSS Transform Skew [duplicate]

阅读更多关于 CSS Transform Skew [duplicate]

This question already has an answer here: Responsive CSS Trapezoid Shape 2 answers Does anyone know how to achieve skew like this: Using CSS's new transform property? As you can see I'm trying to skew both corners, anyone know if this is possible? CSS: #box { width: 200px; height: 200px; background: black; position: relative; -webkit-transition: all 300ms ease-in; } #box:hover { -webkit-transform: rotate(-180deg) scale(0.8); } #box:after, #box:before { display: block; content: "\0020"; color: transparent; width: 211px; height: 45px; background: white; position: absolute; left: 1px; bottom:

Spin or rotate an image on hover

阅读更多关于 Spin or rotate an image on hover

I want to find out how to make a spinning or rotating image when it is hovered. I would like to know how to emulate that functionality with CSS on the following code : img { border-radius: 50%; } <img src="http://i.imgur.com/3DWAbmN.jpg" /> You can use CSS3 transitions with rotate() to spin the image on hover . Rotating image : img { border-radius: 50%; -webkit-transition: -webkit-transform .8s ease-in-out; transition: transform .8s ease-in-out; } img:hover { -webkit-transform: rotate(360deg); transform: rotate(360deg); } <img src="https://i.stack.imgur.com/BLkKe.jpg" width="100" height="100"/

jQuery Drag/Resize with CSS Transform Scale

阅读更多关于 jQuery Drag/Resize with CSS Transform Scale

I am applying a CSS transform (and the browser specific -webkit, -o etc): transform: matrix(0.5 , 0 , 0, 0.5, 0 , 0); to a div then using jQuery's draggable() and resizable() plugins on children of said div. The problem I had was that when dragging or resizing the child elements, the alteration jQuery made were out of "sync" with the mouse by a factor equal to the scale applied. I found a solution on stackoverflow (though I stupidly did not bookmark it and now cant find it....) that suggested patching the plugins, and it worked wonderfully. It went along these line: function monkeyPatch

CSS Transform with element resizing

阅读更多关于 CSS Transform with element resizing

问题 I found this: width/height after transform and several others, but nothing is not quite what I'm looking for. What I want is to scale something to 50% of it's size (with nice animated transition of course) and have the page layout re-adjust to the new (visual) size of the element. What seems to happen by default is that the element still retains it's original size in the layout structure, and is merely drawn with the associated transformations. Basically I want the user to click on a block of

How should you prefix transform properties in CSS3 animations?

阅读更多关于 How should you prefix transform properties in CSS3 animations?

问题 I have the following snippet of Sass that works like a charm, but I wonder if I need to prefix my transform properties, and, if so, how? (if not, why not?) @mixin expand-o-band() { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(2); } } @-webkit-keyframes expand-o-band { @include expand-o-band(); } @-moz-keyframes expand-o-band { @include expand-o-band(); } @-o-keyframes expand-o-band { @include expand-o-band(); } @keyframes expand-o-band { @include expand-o-band()

How to prevent Webkit text rendering change during CSS transition

阅读更多关于 How to prevent Webkit text rendering change during CSS transition

I'm using CSS transitions to transition between CSS transformed states (basically transitioning the scale of an element). I notice that when the element is transitioning, the rest of the text on the page (in Webkit) tends to slightly alter its rendering until the transition is done. Fiddle: http://jsfiddle.net/russelluresti/UeNFK/ I also noticed that this does not occur on my headers, which have the -webkit-font-smoothing: antialiased property/value pair on them. So, I'm wondering, is there any way to have the text maintain its default look (the "auto" value for font-smoothing) and not alter

CSS3 transform order matters: rightmost operation first

阅读更多关于 CSS3 transform order matters: rightmost operation first

问题 When we use CSS3 transform: operation1(...) operation2(...) , which one is done first? The first operation done seems to be the one the most on the right. , i.e. here operation2 is done before operation1 . Just to be sure, is it true? Note: I have read one thing and its contrary in some places (answers, articles on the internet), thus the question here. 回答1: Yes, the first operation done is the one the most on the right., i.e. here operation2 is done before operation1 . Here is the

Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

阅读更多关于 Why is backface-visibility hidden not working in IE10 when perspective is applied to parent elements?

问题 Ok, so here's another IE10 glitch. The problem is that applying perspective on parent elements breaks the backface-visibility hidden setting. Please see this fiddle: http://jsfiddle.net/2y4eA When you hover over the red square it rotates by 180° on the x-axis, and even though the backface-visibility is set to hidden, the backface is shown, at least until the 180° is reached, then it disappears. Remove the perspective property, and you'll see that it works as expected, the backface isn't

3D CSS transform, jagged edges in Firefox

阅读更多关于 3D CSS transform, jagged edges in Firefox

Similary to " css transform, jagged edges in chrome ", same occurs with Firefox on 3D transforms, eg: http://jsfiddle.net/78d8K/5/ (<- remember: Firefox ) This time, backface-visibility doesn't help :( Any idea? Edited answer: (after comments) "Workaround", add a transparent outline attribute: outline: 1px solid transparent; Tested on Firefox 10.0.2 Windows 7: http://jsfiddle.net/nKhr8/ Original answer: (background-color dependent) "Workaround", add a border attribute with the same color of your background (white this case): border: 1px solid white; Tested on Firefox 10.0.2 Windows 7: http:/