Transform perspective CSS only to container, not content - css

Question

When I try to use "perspective" property and then "transform: rotateY(10deg)" the effect applies to the children elements too. I want a rectangle with perspective but don't want the text inside to be in perspective. Any idea?
I've created a JSFIDDLE example
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

The CSS perspective-property just applies perspective to the children not itself. To get an "unflattened"/perspective result, just put this rule on your content-element:
transform-style: preserve-3d;
And put this on your H3-element:
transform: rotateY(45deg);
If the content-element is transformed or has perspective it builds a containing-block and a stacking-context, so the chidren are forced to render to this layer anyway. That means you cannot use fixed elements in an transformed context (in IE11+ you can) to skip the ancestors transformations. So you have to reverse the transformations on the target element (H3) in perspective to get an undistorted result.
.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>

Answer 2

Finally, I solved this. Here is the codepen and the code if someone want to make something similar:
http://codepen.io/marinagallardo/pen/jPjBMV
.heading {
background: red;
display: inline-block;
margin: 20px;
border-radius: 3px;
color: white;
position: relative;
height: 40px;
transform: skewX(-1deg);
}
.heading p {
padding: 0 20px;
margin: 0;
position: relative;
z-index: 100;
margin-top: 10px;
transform: skewX(1deg);
}
.heading:before {
content: "";
display: block;
height: 50%;
top: -10px;
width: 100%;
background: red;
transform: skewY(-2deg);
position: absolute;
border-radius: 3px;
}
.heading:after {
content: "";
display: block;
height: 50%;
background: red;
transform: skewY(2deg);
position: absolute;
bottom: -10px;
width: 100%;
border-radius: 3px;
}
<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>

Answer 3

You need to put out the container and wrap container and content with a div. I create a fiddle working, the first block is like you defined (container and content inherit perspective), and the second block is like I tell you with a wrapper (perspective only for container, not for content).
http://jsfiddle.net/c72b5184/1/
The code is like this (note that the correct version is .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>