Element in transform rotate3d parent still looks flat

css, css-transforms

Solution

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

Problem

I've been working on a prototype for a library page with a elements in a grid and I want to incorporate some 3D styling on hover of these elements. I am looking into the techniques used in the following articles: - http://tympanus.net/Development/3DBookShowcase/ - http://tympanus.net/Development/AnimatedBooks/index.html - http://css3.bradshawenterprises.com/transforms/ The prototype I have right now partially achieves what I'm trying to accomplish: http://jsfiddle.net/fmpeyton/8cs35/ (Note: I am testing prototype in Chrome only for now) ``` .resources{ -webkit-perspective: 1000px; } .resource{ /* -webkit-perspective: 800px; */ display: inline-block; vertical-align: top; position: relative; margin: 10px; transition: all .5s; height: 259px; -webkit-transform-style: preserve-3d; } .resource img{ width: 200px; -webkit-transform: translate3d(0,0,20px); } .resource:hover{ -webkit-transform: rotate3d(0, 1, 0, 40deg); } .resource .title{ background: #999; display: block; position: absolute; height: 259px; -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-origin: 0 0; -webkit-transform: rotate(90deg) translateY(-40px); } ``` My issue looks like it comes down to the manipulation of the `perspective` property. If I add a `perspective` to the `.resources` parent element, I achieve the desired effect on the 3rd row & first 3 elements, but the other rows are not what I'm going after. I would like to have the same perspective for each individual `.resource` element, rather than one perspective for the entire set of `.resource` elements. If I add a `perspective` to the `.resource` child elements, I get a more even distribution of perspective across each element. When I hover over, the spine (`.title`) has the right look (perspective-wise) but the cover image doesn't look right when rotating. It looks like the cover is just smushed horizontally: 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? I know I still may be lacking in understanding of 3D transforms completely, but hopefully this question/project will help complete my understanding.

Original source