How can I create css3 3d covers

Reading Time: 2 minutes

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.

This is the html code.

Applying css3 3d covers styles

/* ******** books wrapper ******* */
.csstransforms3d  .books-wrapper {
  -moz-perspective: 100px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
/* ******** books styles ******** */
.book {
  display: inline-block;
  box-shadow: 5px 5px 20px #333;
  margin: 10px;
}
.book img { vertical-align: middle; }
.csstransforms3d  .book {
  position: relative;
  -moz-perspective: 100px;
  -moz-transform: rotateY(-3deg);
  -webkit-transform: perspective(100) rotateY(-3deg);
  outline: 1px solid transparent;
  box-shadow: none;
  margin: 0;
}
.csstransforms3d  .book img {
  position: relative;
  max-width: 100%;
}
.csstransforms3d  .book:before,
.csstransforms3d  .book:after {
  position: absolute;
  top: 2%;
  height: 96%;
  content: ' ';
  z-index: -1;
}
.csstransforms3d  .book:before {
  width: 100%;
  left: 7.5%;
  background-color: #5a2d18;
  box-shadow: 5px 5px 20px #333;
}
.csstransforms3d  .book:after {
  width: 5%;
  left: 100%;
  background-color: #EFEFEF;
  box-shadow: inset 0px 0px 5px #aaa;
  -moz-transform: rotateY(20deg);
  -webkit-transform: perspective(100) rotateY(20deg);
}

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” ]http://modernizr.com/[/tooltip]

View css3 3d covers Demo

Download css3 3d covers Example (30 KB)