变换rotate3d父元素仍然看起来平坦

Question

我一直在研究一个带有网格元素的库页面的原型,我希望在悬停这些元素时加入一些3D样式.

我正在研究以下文章中使用的技术:

• http://tympanus.net/Development/3DBookShowcase/
• http://tympanus.net/Development/AnimatedBooks/index.html
• http://css3.bradshawenterprises.com/transforms/

我现在的原型部分实现了我想要实现的目标:http://jsfiddle.net/fmpeyton/8cs35/(注意:我现在只在Chrome中测试原型)

.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子元素添加一个,我会在每个元素上获得更均匀的透视分布.当我将鼠标悬停在上方时,spine(.title)具有正确的外观(透视),但旋转时封面图像看起来不正确.看起来盖子只是水平地拉了一下:

这是所有.resource元素的理想外观:

主要问题:如何.resource在旋转时让所有元素具有相同的外观,看起来它们在3D空间中旋转？

我知道我仍然可能完全缺乏对3D变换的理解,但希望这个问题/项目能够帮助我完成理解.

Answer 1

透视有两种形式,作为属性或作为函数.

作为属性的透视意味着在要变换的元素的父元素上设置,并且当您想要自然设置(所以说)时,每个元素被渲染为不同,因为与查看器的相对位置不同.(也就是说,视角属于场景,可以这么说)

透视作为一个函数意味着相反的情况,你有一堆对象,并且你希望所有这些对象以相同的方式呈现.(在场景级别没有透视图,但在元素级别.

您的要求与第二个要求匹配,因此:

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

请注意,为了使转换平滑,我将转换设置为基本状态和悬停状态之间的可能

小提琴