反制透視效果

Question

我正試圖在div上創建一個空白效果。我使用透視來塑造div。但我無法解決的是如何使內容正常。我無法得到正確的設置來扭轉效果。

例如，我將使用#shape和#inside：

#shape { 
    height: 300px; 
    width: 300px; 
    transform: perspective(600px) rotateY(-60deg); 
    -webkit-transform: perspective(600px) rotateX(-60deg); 
} 
#shape #inside { 
    //what do I put here to reverse the perspective effect? 
} 

Answer 1

我認爲最好的方法是使用同時包含#shape和#inside的包裝股利。這樣，文本內容就不會被改變。參見，例如，this jsFiddle。基本思路：

HTML：

<div id="wrapper"> 
    <div id="shape"></div> 
    <div id="inside"> 
     Some content. 
    </div> 
</div> 

CSS：

#wrapper { 
    position: relative; 
} 
#shape { 
    height: 300px; 
    width: 300px; 
    background: red; 
    color: #511; 
    position: absolute; 
    z-index: -1; 
} 
#shape.transform { 
    transform: perspective(600px) rotateY(-60deg); 
    -webkit-transform: perspective(600px) rotateX(-60deg); 
} 

你可能會發現，但是，你要一些特殊的造型適用於內的文本時，形狀被變換。最簡單的方法是將transform樣式分配給#wrapper。例如，this jsFiddle。

#wrapper.transform #shape { 
    transform: perspective(600px) rotateY(-60deg); 
    -webkit-transform: perspective(600px) rotateX(-60deg); 
} 
#wrapper.transform #inside { 
    transform: translate(50px, 100px); 
    -webkit-transform: translate(50px, 100px); 
}