diTii.com Digital News Hub

Sign up with your email address to be the first to know about latest news and more.

I agree to have my personal information transfered to MailChimp (more information)

Jun032008

Build a Coverflow Effect with CSS transforms

Using WebKit CSS transforms, a boxes can be scaled, rotated, skewed and translated. The current nightly builds support affine transformations.

A transform can be specified using the -webkit-transform property. It supports a list of functions, where each single function represents a transform operation to apply. You can chain together operations to apply multiple transforms at once to an object (e.g., if you want to both scale and rotate a box). The supported primitives are:

  • scale, scaleX, scaleY – Scale an object around the transform origin. These functions take a number as an argument. The number can be negative (if you want to flip an object).
  • rotate – Rotate an object around the transform origin. This function takes a CSS angle (e.g., degrees or radian units).
  • translate, translateX, translateY – Translate an object. These functions take lengths or percentages as arguments. Percentages are relative to the border box of the object.
  • skew, skewX, skewY – Skew an object. These functions take CSS angles.
  • matrix – Specify a full affine transform matrix. This function takes six values. The last two values are the tx and ty, and they can be lengths or percentages.
Share This Story, Choose Your Platform!