Element in transform rotate3d parent still looks flat

Question 1

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

fiddle

Question 2

When you set perspective to .resources all the child transforms are rendered from the perspective of .resources. And the desired effect perspective should be set to each of the image + title containing blocks separately. And rotate3d transform should be applied on the child of this container which needs another div child for .resource

<div class="resource">
    <div class = "res">
        <div class="title"><p>Whitepaper 1</p></div>
        <img src="http://oi62.tinypic.com/20rldox.jpg">
    </div>  
</div>

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

You can always change the perspective-origin, which gives different effect to the transform For a clear understanding about perspective-origin refer

Element in transform rotate3d parent still looks flat

Here's the desired look for all of the `.resource` elements:

Main question: How do I get all of my `.resource` elements to have the same look when rotated, that looks like they are being rotated in a 3D space?

Element in transform rotate3d parent still looks flat

Here's the desired look for all of the .resource elements:

Main question: How do I get all of my .resource elements to have the same look when rotated, that looks like they are being rotated in a 3D space?

Here's the desired look for all of the `.resource` elements:

Main question: How do I get all of my `.resource` elements to have the same look when rotated, that looks like they are being rotated in a 3D space?