transition and transform are separate CSS properties, but you can supply transform to transition to “animate” a transformation. transition The CSS transition property listens for changes to specified properties (background-color, width, height, etc.) over time. transition Property Syntax: selector { transtion: [property-name] [duration] [timing-function] [delay] } For example, the below styles will change the color … Read more
The CSS Transforms spec explains this behavior. Elements with transforms act as a containing block for fixed position descendants, so position:fixed under something with a transform no longer has fixed behavior. They do work when applied to the same element; the element will be positioned as fixed, and then transformed.
I didn’t post my idea originally, because it involves creating an additional HTML layer, and expected better solutions to come. Since that hasn’t happened, I explain my comment. What I meant was this: #parent { position: relative; width: 300px; height: 100px; background-color: black; } #wrapper { position: absolute; width: 100%; height: 100px; border: solid 1px … Read more
I fiddled with jsfiddle, and this worked: $(‘#photo’).css(‘transform’, ‘rotate(90deg) scaleX(-1)’); To relate it to your question, the resulting CSS looks like transform: rotate(90deg) scaleX(-1);
You can rotate an image with CSS using the transform property with a rotate(**deg) value .rotate-img { -webkit-transform : rotate(90deg) scale(0.2); /* Chrome, Opera 15+, Safari 3.1+ */ -ms-transform : rotate(90deg) scale(0.2); /* IE 9 */ transform : rotate(90deg) scale(0.2); /* Firefox 16+, IE 10+, Opera */ left : -200px; position: relative; } <img class=”rotate-img” … Read more
It’s been a while since this question was asked. I have found (actually created) an answer. All it requires is setting callback handlers. No editing jquery-ui needed! Note: zoomScale in this example is a global variable and the transform is set using animate (aided by jquery.transform.js) like so: target.animate({ transform: ‘scale(‘ + zoomScale + ‘)’ … Read more
I’m guessing this does not work because the classes override each other’s transform property? Correct. This is an unfortunate limitation as a side-effect of how the cascade works. You will have to specify both functions in a single transform declaration. You could simply chain both class selectors together instead of creating a new class for … Read more
Explanation: A <span> or a link (<a>) are inline elements and the transform property doesn’t apply to inline elements. Here is the list of transformable elements from the CSS Transforms Module Level 1. Solution: Set the display property of the span to inline-block or block. This will let you apply transforms to the span element. … Read more
If you want a css only solution you can use active .crossRotate:active { transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); } But the transformation will not persist when the activity moves. For that you need javascript (jquery click and css is the cleanest IMO). $( “.crossRotate” ).click(function() { if ( $( this ).css( “transform” ) == … Read more
I came up against this glitch too and it is definitely a glitch. The workaround is to apply the perspective transform on the child element. I updated your fiddle here: http://jsfiddle.net/jMe2c/ .item { backface-visibility: hidden; transform: perspective(200px) rotateX(0deg); } .container:hover .item { transform: perspective(200px) rotateX(180deg); } (See also answer at https://stackoverflow.com/a/14507332/2105930) I think it is … Read more