如何将 -webkit-transform 应用于 div 而不是其中的元素？答案

【问题标题】：How do I apply a -webkit-transform to a div but not the elements inside it?如何将 -webkit-transform 应用于 div 而不是其中的元素？
【发布时间】：2014-08-06 08:21:27
【问题描述】：

我想对 div 应用 webkit 转换（在本例中为 skew），但不希望文本受到影响。我该怎么办？我当前的代码如下：

.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>

【问题讨论】：

您的意思是要倾斜 div 而不是 div 内的文本？
Stack Overflow Chat 是 BFDatabaseAdmin
Stack Overflow Chat我在本地工作，克雷格
Slant the top of a div using css without skewing text 的可能副本

标签： html css

【解决方案1】：

只需再添加一个 div 并将转换应用于正常的，如下所示。

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

想法 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

【讨论】：

【解决方案2】：

您需要对文本和输入应用单独的样式，还需要将文本包装在<p> 标签中：

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

【讨论】：