Perspective comes in 2 flavors, as a property or as a function.
Perspective as a property is meant to be set on the parent of the elements being transformed, and is indicated when you want a natural setting (so to say) where every element is rendered different, because the relative position to the viewer is different. (that is, the perspective belongs to the scene, so to speak, )
Perspective as a function is meant to the opposite scenario, where you have a bunch of objects, and you want all of them to be rendered the same way. (There is no perspective at the scene level, but at the element level.
Your requirements match the second one, so:
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) rotate3d(0, 1, 0, 0deg);
}
.resource:hover{
-webkit-transform: perspective(1000px) rotate3d(0, 1, 0, 40deg);
}
Notice that to make the transition smooth, I am setting the transform as alike as posible between the base state and the hover state