Geek asks and answers

The element in rotate3d rotation still looks flat

I was working on a prototype for a library page with elements in a grid, and I want to include a 3D style in the guidance of these elements.

I study the methods used in the following articles:

The prototype that I am currently partially executing does what I'm trying to execute: http://jsfiddle.net/fmpeyton/8cs35/ (Note: I'm testing the prototype in Chrome just 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);
}

, , perspective. perspective .resources, 3- 3- , , . .resource, .resource.

perspective .resource, . , (.title) ( ), . , : enter image description here

.resource:

enter image description here

: .resource , , ?

, , , , / .

+3
2

, .

​​ , , , ( ), , . (.. , )

, , , . ( , .

, :

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);
}

: , ,

fiddle

+5

perspective .resources transform .resources. perspective + , . rotate3d transform , div .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);
}

-, transform perspective-origin

+2

More articles:


All Articles