CSS3歪斜DIV问题

Question

我试图扭曲一个 div ，类似于 https://digital.scotch.io/ 的东西，但实际上它并没有正确出现。

.skew1:before {
  content:' ';
  display: block;
  height: 400px;
  width: 100%;
  background: black;
  padding: 50px 0;
  -webkit-transform: skewY(-2deg) translateZ(0);
  -moz-transform: skewY(-2deg) translateZ(0);
  -ms-transform: skewY(-2deg) translateZ(0);
  -o-transform: skewY(-2deg) translateZ(0);
  transform: skewY(-2deg) translateZ(0);
  position: absolute;
  left: 0;
  bottom: -10px;
  z-index: -1;
  overflow: hidden;
}

<section>
  <div class="container skew1">
    <div class="row">
      <div class="col-md-12">
        <h2>This is my skew1!</h2>
      </div>
    </div>  
  </div>  
</section>

不确定我做错了什么。这是我的 JSfiddle 。有什么帮助吗？感谢。

Answer 1

你需要的不是倾斜。您需要为div设置一个3d透视图并在其Y轴上旋转它：

.container {
  margin-top: 20px;
  width: 500px;
  height: 150px;
  position: relative;
  perspective: 800px;
}
.container2 {
  margin: 5px 82px;
  width: 500px;
  height: 150px;
  position: relative;
  perspective: 800px;
}
.container .inner {
  width: 100%;
  height: 100%;
  display: block;
  background: red;
  transform: rotateY(-45deg);
}
.container2 .inner {
  width: 100%;
  height: 100%;
  display: block;
  background: blue;
  transform: rotateY(45deg);
}

<section class="container">
  <div class="inner"></div>
</section>
<section class="container2">
  <div class="inner"></div>
</section>

Answer 2

包含文字的 div 需要position: relative;（检查原始代码），还需要一些height和{{1} }垂直对齐文本。这是 JSFiddle 。