CSS3 3d transform

HTML

<div class="resources">
	<div class="resource">
		<div class="title"><p>Whitepaper 1</p></div>
	    <img src="http://oi62.tinypic.com/20rldox.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Datasheet 1</p></div>
	    <img src="http://oi59.tinypic.com/2wqdell.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Whitepaper 1</p></div>
	    <img src="http://oi62.tinypic.com/20rldox.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Datasheet 1</p></div>
	    <img src="http://oi59.tinypic.com/2wqdell.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Whitepaper 1</p></div>
	    <img src="http://oi62.tinypic.com/20rldox.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Datasheet 1</p></div>
	    <img src="http://oi59.tinypic.com/2wqdell.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Whitepaper 1</p></div>
	    <img src="http://oi62.tinypic.com/20rldox.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Datasheet 1</p></div>
	    <img src="http://oi59.tinypic.com/2wqdell.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Whitepaper 1</p></div>
	    <img src="http://oi62.tinypic.com/20rldox.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Datasheet 1</p></div>
	    <img src="http://oi59.tinypic.com/2wqdell.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Whitepaper 1</p></div>
	    <img src="http://oi62.tinypic.com/20rldox.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Datasheet 1</p></div>
	    <img src="http://oi59.tinypic.com/2wqdell.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Whitepaper 1</p></div>
	    <img src="http://oi62.tinypic.com/20rldox.jpg">
	</div>
	<div class="resource">
		<div class="title"><p>Datasheet 1</p></div>
	    <img src="http://oi59.tinypic.com/2wqdell.jpg">
	</div>
</div>

CSS

.resource{
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 10px;
    transition: all .5s;
    height: 259px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(1000px);
}

.resource:hover{
    -webkit-transform-style: preserve-3d;
    -webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 40deg);
}

.resource img{
    width: 200px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: translate3d(0,0,20px);
}

.resource .title{
    background: #999;
    display: block;
    position: absolute;
    height: 259px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform: rotate3d(0,1,0,-90deg);
    width: 40px;
    left: -20px;
    
}
.resource .title p{
    font-size: 15px;
    line-height: 40px;
    padding-right: 10px;
    text-align: right;
    width: 240px;
    height: 40px;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotate(90deg) translateY(-40px);
}