css-transforms

Why is text getting blurry and wobbles during 2d scale transform

Instead of using scale you can consider a translateZ with a perspective. Make sure to define the perspective initially to avoid the bad effect when moving the cursor fast: .scalable{ transition: 0.3s ease-in-out; box-shadow: 0 6px 10px rgba(0,0,0,0.14); transform:perspective(100px); } .scalable:hover { transform:perspective(100px) translateZ(5px); box-shadow: 0 8px 40px rgba(0,0,0,0.25); } .card { width: 100%; background: … Read more

CSS3 transform order matters: rightmost operation first

Yes, the first operation done is the one the most on the right., i.e. here operation2 is done before operation1. This MDN article states indeed: The transform functions are multiplied in order from left to right, meaning that composite transforms are effectively applied in order from right to left. Here is the documentation : http://www.w3.org/TR/css-transforms-1/. … Read more

rotate3d shorthand

rotateX(50deg) is equivalent to rotate3d(1, 0, 0, 50deg) rotateY(20deg) is equivalent to rotate3d(0, 1, 0, 20deg) rotateZ(15deg) is equivalent to rotate3d(0, 0, 1, 15deg) So… rotateX(50deg) rotateY(20deg) rotateZ(15deg) is equivalent to rotate3d(1, 0, 0, 50deg) rotate3d(0, 1, 0, 20deg) rotate3d(0, 0, 1, 15deg) For a generic rotate3d(x, y, z, α), you have the matrix where … Read more

How can I use CSS3 transform on a span?

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

jQuery Drag/Resize with CSS Transform Scale

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

Why does my Transform snap back?

Cause and Solution: CSS Transforms generally cannot be applied to elements that have display: inline setting. While it is strange that the transform does seem to happen initially before snapping back, the solution would be to change the setting to display: inline-block like in the below snippet. .blockquote { font-family: “Open Sans”, Verdana, Arial, sans-serif; … Read more

Spin or rotate an image on hover

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