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 […]

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.

About The Author

Deepak Gupta is a IT & Web Consultant. He is the founder and CEO of diTii.com & DIT Technologies, where he's engaged in providing Technology Consultancy, Design and Development of Desktop, Web and Mobile applications using various tools and softwares. Sign-up for the Email for daily updates. Google+ Profile.