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

时间：2014-02-12 19:06:59

标签： css css3 css-transforms

我一直在为一个带有网格元素的库页面的原型工作，我希望在悬停这些元素时加入一些3D样式。

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

我现在的原型部分实现了我想要实现的目标：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行上获得所需的效果。前3个元素，但其他行不是我要追求的。我希望对每个.resource元素都有相同的视角，而不是整个.resource元素集的一个视角。

如果我向perspective子元素添加.resource，我会在每个元素上获得更均匀的透视分布。当我将鼠标悬停在上方时，脊柱（.title）具有正确的外观（透视方式），但旋转时封面图像看起来不正确。看起来盖子只是水平地刷了一下： enter image description here

以下是所有.resource元素的所需外观：

enter image description here

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

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

2 个答案:

答案 0 :(得分：6)

透视有两种形式，作为属性或作为函数。

透视作为属性意味着要在被转换的元素的父元素上设置，并在需要自然设置（可以这么说）时指示每个元素呈现不同，因为与观众的相对位置是不同的。 （也就是说，视角属于场景，可以这么说）

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

您的要求与第二个要求相符，所以：

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

答案 1 :(得分：2)

当您将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);
}

您始终可以更改perspective-origin，这会对transform产生不同的影响 要清楚了解perspective-origin引用

相关问题
最新问题