How to create a 3D effect for images?

Question

We are working on a book library type of interface and want to understand the best/simplest way to achieve the effect for image?

HTML/CSS or iOS references will help. Ideally the effect that Amazon uses would be awesome - with basic HTML/CSS code.

I assume we need to get the code to put a block of black/gray background and then skew the image to make the left side height to be smaller than right side height ?

Thanks for any pointers or jsFiddle code. I am not looking for a hover - just standard placement options.

Answer 1

This is how you can do this using perspective and :before :pseudo element s:

Demo on dabblet

HTML:

<div class="img-1">
    <img src="http://s25.postimg.org/xhz22u173/9780439287197_p0_v2_s260x420.jpg" />
</div>
<div class="img-2">
    <img src="http://s25.postimg.org/xhz22u173/9780439287197_p0_v2_s260x420.jpg" />
</div>

CSS:

body {
    background: lightblue;
}
.container {
    width: 620px;
}
.img-1 {
    position: relative;
    display: inline-block;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    perspective: 1000px;
    margin-top: 50px;
    margin: 20px;
}
.img-1 img {
    transform: rotateY(-30deg);
}
.img-1:before {
    content: "";
    position: absolute;
    width: 260px;
    height: 100%;
    background-color: black;
    transform: rotateY(-30deg) translateZ(-30px);
    border-radius: 15px;
}
.img-2 {
    position: relative;
    display: inline-block;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    persepctive: 1000px;
    margin: 20px;
    margin-top: 50px;
}
.img-2 img {
    transform: rotateY(40deg);
}
.img-2:before {
    content: "";
    top: -15px;
    position: absolute;
    width: 19%;
    height: 105.6%;
    background-color: black;
    transform: translateX(-16px) translateY(2.7px) rotateY(-55deg)
}

Answer 2

Here is a jsfiddle to get you going in the right direction:

http://jsfiddle.net/larryjoelane/6u2x6vwd/1/

sample css code:

        .three-d{

      height:250px;
      width:250px;
      background-color:green;/*for testing only*/
      border:black solid 1px;

      /*rotate the image on its Y axis */
      -webkit-transform: rotateY(145deg); /* Chrome, Safari, Opera */
      transform: rotateY(145deg);

      /*rotate the image on its Z axis */
      -webkit-transform: rotateZ(179deg); /* Chrome, Safari, Opera */
      transform: rotateZ(179deg);


    }

Make sure you change the degree values in the css to change the rotation(make sure you change all the values for the -web-kit-transform and the tranform code blocks:

Sample HTML:

  <img class="three-d" alt="3D looking image" src="pathToImage.png" >