反制透视效果

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