將透視CSS僅轉換爲容器，而不是內容

Question

當我嘗試使用「透視」屬性，然後「transform：rotateY（10deg）」時，該效果也適用於子元素。我想要一個帶有透視的矩形，但不希望內部的文字處於透視狀態。任何想法？

我創建了一個例子的jsfiddle https://jsfiddle.net/j0ofgbLo/1/

.container { 
 
    perspective: 500px; 
 
} 
 

 
.content{ 
 
    transform: rotateY(-45deg); 
 
    background: #ddd; 
 
    min-width: 100px;  
 
    padding: 0 20px;  
 
}

<div class="container"> 
 
    <div class="content"> 
 
     <h3>Text</h3> 
 
    </div> 
 
</div>

Answer 1

你需要拿出容器和包裝容器和內容股利。我創建了一個小提琴工作，第一個塊就像你定義的（容器和內容繼承透視圖），第二個塊就像我用一個包裝器（透視圖僅用於容器，而不是內容）告訴你的。

http://jsfiddle.net/c72b5184/1/

的代碼是這樣的（注意，正確的版本是.wrapper *）

.container { 
    background-color: blue; 
    width: 200px; 
    transform: rotateY(50deg); 
    height: 200px; 
} 
.content { 
    background-color: green; 
    width: 50px; 
    height: 50px; 
} 

.wrapper { 
    position: relative; 
    margin: 20px 0; 
} 
.wrapper .container, 
.wrapper .content{ 
    position: absolute; 
    top: 0; 
    left:0; 
} 

HTML

<div class="container"> 
    <div class="content"></div> 
</div> 

<div class="wrapper"> 
    <div class="container"></div> 
    <div class="content"></div> 
</div> 

Answer 2

最後，我解決了這個。這裏是codepen，如果有人想使類似的代碼：

http://codepen.io/marinagallardo/pen/jPjBMV

<div class="heading"> 
    <p>Texto</p> 
</div> 


<div class="heading"> 
    <p>Texto a top de largo</p> 
</div> 



<div class="heading"> 
    <p>Prácticamente escribiendo el quijote</p> 
</div> 


<div class="heading"> 
    <p>Prácticamente escribiendo el quijote, lo cual es una prueba</p> 
</div> 

.heading 
    background: red 
    display: inline-block 
    margin: 20px 
    border-radius: 3px 
    color: white 
    position: relative 
    height: 40px 
    transform: skewX(-1deg) 
    p 
    padding: 0 20px 
    margin: 0 
    position: relative 
    z-index: 100 
    margin-top: 10px 
    transform: skewX(1deg)  
    &:before 
    content: '' 
    display: block 
    height: 50% 
    top: -9px 
    width: 100% 
    background: red 
    transform: skewY(-2deg) 
    position: absolute 
    border-radius: 3px 
    &:after 
    content: '' 
    display: block 
    height: 50% 
    background: red 
    transform: skewY(2deg) 
    position: absolute 
    bottom: -8px 
    width: 100% 
    border-radius: 3px 

Answer 3

的CSS透視性能只是適用的角度給孩子不是自己。爲了得到一個「不平」 /透視的結果，只是把這個規則的內容元素：

transform-style: preserve-3d; 

，並把這個你H3-元素：

transform: rotateY(45deg); 

如果內容元素被轉換或者有透視它構建了一個包含塊和一個堆棧上下文，所以chidren被強制渲染到這個層。這意味着您不能在轉換的上下文中使用固定元素（在IE11 +中可以）跳過祖先轉換。所以你必須在目標元素（H3）的角度來反轉轉換以獲得未失真的結果。

.container 
 
{ 
 
    perspective: 500px; 
 
} 
 

 
.content 
 
{ 
 
    transform: rotateY(-45deg); 
 
    background: #ddd; 
 
    min-width: 100px;  
 
    padding: 0 20px;  
 
    transform-style: preserve-3d; 
 
} 
 

 
h3 
 
{ 
 
    transform: rotateY(45deg); 
 
}

<div class="container"> 
 
    <div class="content"> 
 
     <h3>Text</h3> 
 
    </div> 
 
</div>