The CSS3 transform property can do some really cool things – with it, web designers can rotate, scale, skew and flip objects quite easily. However, in order for designers to have fine-grained, pixel level control over their transforms, the matrix() function is hard to beat. This post explains what it does and the math behind the code. It also includes a tool to help you create matrix() transforms easily using HTML5 Drag and Drop for the user interface and the Sylvester JavaScript library to do the mathematics needed to calculate the matrix values so you don’t have to (in case you have difficulties with math, or if you just are lazy and don’t want to be bothered).
Entries Tagged as 'transform'
The CSS3 matrix() Transform for the Mathematically Challenged
January 7th, 2011 by zoltan · 23 Comments
Tags: CSS · CSS3 · Drag and Drop · math · transform
Using CSS3-Style Transforms in IE Without JavaScript
September 12th, 2010 by zoltan · 6 Comments
The IE Transforms Translator will allow you do Cross Browser CSS3-style Transformations without using a JavaScript library like cssSandpaper.
Giving Challenged @font-face Fonts The Italics Makeover
September 7th, 2010 by zoltan · 5 Comments
Have a font that doesn’t have an italics variant? Does your browser try to attempt to “obliquify” it (badly) or not do anything at all? There is a simple solution to this problem using CSS3 Transforms.
Tags: @font-face · CSS · CSS3 · Fonts · transform
cssSandpaper Now Supports transform: translate() and rgba() Gradients
May 6th, 2010 by zoltan · 1 Comment
In the first in a planned series of posts, I update cssSandpaper with new features. This week I add IE support for translate() support to CSS transforms and alpha channel support to linear gradients.
Tags: Color · CSS · CSS3 · IE Visual Filters · JavaScript · Polyfills · rgb/rgba · transform
Cross-Browser Animated CSS Transforms — Even in IE.
April 5th, 2010 by zoltan · 18 Comments
This is a follow-up article to my original CSS3 Transform article where I extend cssSandpaper to support scripting. Now you can animate Css3 Transforms (as well as gradients, opacities and box-shadows) in all browsers, including IE, without a lot of issues. Includes lots of neat examples.
Tags: CSS · CSS3 · gradients · IE Visual Filters · JavaScript · Polyfills · transform
Cross Browser CSS Transforms – even in IE
March 9th, 2010 by zoltan · 112 Comments
The CSS transform property allows developers to rotate, scale, and skew blocks of HTML via CSS. There are variants that work natively on all major browsers … except for IE. I created a new library, cssSandpaper, that implements CSS3 transforms (as well as gradients and box-shadows) in IE. It also allows developers to use one transform declaration, instead of three vendor-specific ones for Opera, Firefox and WebKit browsers.
Tags: box-shadow · CSS · CSS3 · gradients · IE Visual Filters · JavaScript · Polyfills · transform

