css-transforms

Rotate webpage via code?

by

Here’s another solution based on the matrix filter which works in IE. http://www.boogdesign.com/examples/transforms/matrix-calculator.html The css for -30 degrees would be: .rotate { -ms-filter: “progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod=’auto expand’)”; filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.86602540, M12=0.50000000, M21=-0.50000000, M22=0.86602540,sizingMethod=’auto expand’); -moz-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0); -webkit-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0); -o-transform: matrix(0.86602540, -0.50000000, 0.50000000, 0.86602540, 0, 0); … Read more

How to reset CSS3 *-transform: translate(…)?

by

As per the MDN documentation, the Initial value is none. You can reset the transformation using: div.someclass { transform: none; } Using vendor prefix: div.someclass { -webkit-transform: none; /* Safari and Chrome */ -moz-transform: none; /* Firefox */ -ms-transform: none; /* IE 9 */ -o-transform: none; /* Opera */ transform: none; }

3D CSS transform, jagged edges in Firefox

by

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://jsfiddle.net/LPEfC/

Spin or rotate an image on hover

by

You can use CSS3 transitions with rotate() to spin the image on hover. Rotating image : img { transition: transform .7s ease-in-out; } img:hover { transform: rotate(360deg); } <img src=”https://i.stack.imgur.com/BLkKe.jpg” width=”100″ height=”100″/> Here is a fiddle DEMO More info and references : a guide about CSS transitions on MDN a guide about CSS transforms on … Read more

CSS Transform with element resizing

by

The problem I noticed is that when element scales, browser change its pixels ratio, not pixels amount. Element is smaller but it doesn’t change its actual pixel size in DOM. Because of that I don’t think that CSS-only solution exist. I put scalable element into container which keeps the same pixel ratio as rest of … Read more