Rollover mit 3D-Effekt

Original von Chris Heilmann: http://jsfiddle.net/codepo8/XR4Bj/1/

by Jens Grochtdreis

HTML

<ul>
  <li class="image3d"><figure><img src="http://placekitten.com/g/300/200"></figure><figcaption><p><strong>Mittens</strong> loves to play with yarn and stuff.</p></figcaption></li>
  <li class="image3d"><figure><img src="http://placekitten.com/g/300/200"></figure><figcaption><p><strong>Mittens</strong> loves to play with yarn and stuff.</p></figcaption></li>
  </ul>

CSS

*{margin:0;padding:0;}
  footer,section,header{display:block;}
  html,body{
    font-size:15px;font-family:helvetica,arial,sans-serif;
    background:#333;
    color:#ccc;
  }
  
  .image3d{
    font-family:calibri,inherit;
    font-size:20px;
    position:relative;
    -moz-perspective:800px;
    -webkit-perspective:800px;
    -ms-perspective:800px;
    -o-perspective:800px;
    perspective:800px;
    width:300px;
    overflow:hidden;
    margin:1em;
    height:200px;
    background: #111;
  }
  .image3d figure{
    -webkit-transition:-webkit-transform 1s;
    -moz-transition:-moz-transform 1s;
    -o-transition:-o-transform 1s;
    -ms-transition:-ms-transform 1s;
    transition:transform 1s;
  }
  .image3d figcaption{
    position:absolute;
    top:0;
    background:rgba(0,0,0,0.7);
    color:#fff;
    border-radius:5px;
    left:300px;
    top:50px;
    width:200px;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;
    -ms-transition:all 1s;
    -o-transition:all 1s;
    transition:all 1s;
  }
  .image3d strong{
    display:block;
    color:lime;
    padding:5px 0;
  }
  .image3d p{
    display:block;
    color:white;
    padding:5px;
  }
  .image3d:hover figcaption{
    left:100px;
  }
  .image3d figure:hover{
      -webkit-transform:rotateY(50deg) translateX(-100px);    
      -moz-transform:rotateY(50deg) translateX(-100px);    
      -ms-transform:rotateY(50deg) translateX(-100px);    
      -o-transform:rotateY(50deg) translateX(-100px);    
      transform:rotateY(50deg) translateX(-100px);    
  }