CODEWITHSUNDEEP
csscss-transforms
Fillip Peyton
Fillip Peyton

Reputation: 3657

Element in transform rotate3d parent still looks flat

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:

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: enter image description here

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

enter image description here

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.

Upvotes: 3

Views: 2467

Answers (2)

vals
vals

Reputation: 64254

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

Upvotes: 6

eldos
eldos

Reputation: 3272

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

Upvotes: 3

Related Questions