元素在轉換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子元素，我可以在每個元素上獲得更均勻的透視分佈。當我懸停時，脊椎（.title）看起來很正確（透視），但旋轉時封面圖片看起來不正確。它看起來像蓋只是水平smushed：

下面是所有.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); 
} 

請注意，以進行平滑的過渡，我我設置轉化爲一樣爲更多鈔票的基本狀態和懸停狀態

fiddle

Answer 2

當您設置perspective到.resources所有的孩子transform s的從.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參考

應用

• https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin
• http://desandro.github.io/3dtransforms/docs/perspective.html