O'Reilly logo

HTML5: Your visual blueprint™ for designing rich web pages and applications by Adam McDaniel

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

TRANSFORM OBJECT DIMENSIONS

You can transform any type of block object in CSS3 using the new transform property allowing you to scale, skew, rotate, and translate objects:

.scale { transform: scale(xpercent, ypercent) }
.skew { transform: skew(xdegrees, ydegrees) }
.rotate { transform: rotate(degrees) }
.translate { transform: translate(xpos, ypos) }

The scale function is relatively simple. It will resize an object into a new width and height using xpercent and ypercent as a decimal value between 0 to 1. If only one value is defined, the browser scales the object proportionally.

The skew function changes the 2D perspective of the object by slanting it left or right by xdegrees and up or down byydegrees. You may specify only one value here, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required