CSS Distortion

Screen Shot 2014-09-26 at 10.13.14 AM

This isn’t so much a real website as it is a demonstration of what’s possible with CSS3. The site demonstrates the power of CSS transform and transition. They distort the images so that they look like files sliding together, but then when you hover over one it removes the distortion and faces forward.

It’s similar to the way iPads and iPhones display album artwork from your music collection. That same effect can be made with just CSS3. Specifically, the transform:distort property and transition. Distorting each image makes it take up less space, so not only is it an aesthetic effect, but it’s functional as well. You can fit more images on the page if they’re distorted a little bit.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s