demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS 2D Transformations: Skew, Scale, and Translate

css / transforms

Estimated reading time: 1 minute, 52 seconds

CSS skew exampleCompared to rotate, the remaining 2D transformations in CSS are probably of less utility: scale and translate have always been available in one form or another in CSS, by modifying element's width and height, or positioning them using relative or absolute position. The primary advantages of using the CSS transform values is that they are more direct, and can be animated with great ease.

skew

CSS skew diagramskew is probably the trickiest of these to understand, as its values (in degrees) don't appear to apply in the ways that one might expect. To me, the easiest way to consider skew is to think of the values as “pulling” on opposite sides of the element box to create the angle specified. For clarity, the CSS declaration is shown without vendor prefixes:

img#car { transform: skewX(21deg); }

You can also skew vertically: skewY(21deg) ). Negative skew values will tilt the element in the opposite direction. Used together, and with careful positioning, it is possible to produce a “box” effect from three equally-sized images, a hint that are achievable in CSS.

scale

scale is a simply a scalar value: a multiplier by which the size of the element is decreased or increased:

img#car { transform: scale(2); }
CSS scale examples

As with rotate and the other CSS transformations, a scaled element does not influence its surroundings.

Again, scale can be constrained to the x and y values alone, via scaleX and scaleY.

translate

CSS translate diagramtranslate moves the element from its current location. In this respect, it is very similar to relative positioning. The property doesn't offer many advantages over relative positioning in itself, but it can be animated very smoothly in CSS… examples of which we will explore next.

img#obj { transform: translateX(2em); }
comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.