How can I create css3 3d covers

How can you create css3 3d covers like book, DVD covers without using photoshop? You can get 3D effects using simple css3 3d features.View demo & download source code.This three-dimensional covers are using only one image that is cover page. ok, look at above image.You can understand this better we are going to do now.

css3 3d covers Compatible Browsers

Note: css3 3d transform is not supported for IE9 and opera.Only support for 2D.

Browser Compatible versions Prefix
20x20firefox 5+ -moz
20x20chrome 12+ -webkit
Internet Explorer Not Support -ms
Safari 3.2+ -webkit
Opera Not Support -o-

This is the html code.

Applying css3 3d covers styles

Adding modernizr js file

To work this 3d effect, you must add Modernizer js file.It detecting 3D transform browser support. This will add a “csstransforms3d” class to the HTML element.

[tooltip title=”Info” content=”Click to view more instructions of modernizr” type=”info” ][/tooltip]

View css3 3d covers Demo

Download css3 3d covers Example (30 KB)

Published by

Sumith Harshan

Sumith Harshan is the Web Engineer Specializes in Java Script, JQuery, HTML4/5, CSS2/3, PHP, CodeIgniter, CakePHP, J2SE, J2EE, XML, Hacking & Security, Mobile Interface Developing, Magento, Wordpress, Joomla, Drupal,PHPBB,Facebook App Developing and Open cart...etc.