How do I apply a -webkit-transform to a div but not the elements inside it?

Question

I want to apply a webkit transformation to a div (in this case, skew), but don't want the text to be affected. How would I go about this? My current code is below:

.main_div {
        width:200px;
        height:100px;
        background:red;
        margin-left:55px;
        margin-top: 25px;
        position:relative;
        -webkit-transform: skew(-30deg);         
    }

    <div class="main_div">
        Dummy Text Here 
        <input type="field" value="" name="" ></input>
    </div>

Do you mean you want to skew the div but not the text inside the div? — Sinister Beard, Aug 06 '14 at 08:24
possible duplicate of [Slant the top of a div using css without skewing text](http://stackoverflow.com/questions/13591584/slant-the-top-of-a-div-using-css-without-skewing-text) — 4dgaurav, Aug 06 '14 at 08:34

score 3 · Answer 1 · answered Aug 06 '14 at 08:30

Just add one more div and apply the transform to normal one like below.

HTML

<div class="main_div">
  <div class="normal">
    <label>Dummy Text Here </label>
    <input type="field" value="" name="" ></input>
  </div>
</div>

CSS

 .main_div {
    width:200px;
    height:100px;
    background:red;
    margin-left:55px;
    margin-top: 25px;
    position:relative;
    -webkit-transform: skew(-30deg);         
 }
 .normal{-webkit-transform: skew(30deg);}

DEMO

IDEA 2:

CSS

 .main_div {
    width:200px;
    height:100px;
    background:red;
    margin-left:55px;
    margin-top: 25px;
    position:relative;
    -webkit-transform: skew(-30deg);         
 }
 .main_div > *{-webkit-transform: skew(30deg);}

HTML

 <div class="main_div">    
    <div>Dummy Text Here </div>
    <input type="field" value="" name="" ></input>   
 </div>

DEMO

score 0 · Answer 2 · edited Aug 06 '14 at 08:28

You need to apply separate styles to your text and input, also you need to wrap your text in <p> tags:

<div class="main_div">
    <p>Dummy Text Here</p> 
    <input type="field" value="" name="" ></input>
</div>

.main_div {
 width:200px;
 height:100px;
 background:red;
 margin-left:55px;
 margin-top: 25px;
 position:relative;
  -webkit-transform: skew(-30deg);
}

p {
width: 100px; 
color: black; 
font-size: 18px;
}

input{
width: 120px;
margin: 0 auto; 
display: block
}

How do I apply a -webkit-transform to a div but not the elements inside it?

2 Answers2

IDEA 2: