Question

我有一个旋转木马（光滑的）显示我倾斜了-10％的各种幻灯片以产生对角线效果。然而，其中的内容也是倾斜的。是否有解决方案来解除内容和背景图像的偏斜，但保留了幻灯片容器上的对角线效果？

Jsfiddle在这里 - https://jsfiddle.net/czcjt3no/1/

  <div class="section">
  <div class="grid poly--holder">
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1000/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1100/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1200/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1300/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
    <div class="poly-item">
      <div class="poly-item__content" style="background-image: url(https://unsplash.it/1400/1000/?random);">sdsfsdsfsdsdfjsdkjfskds</div>
    </div>
  </div>
</div>

.poly--holder {
 overflow: hidden;

 .poly-item {
   box-sizing: border-box;
   margin: 0;
   transform: skewX(-10deg);
   height: 400px;

   .poly-item__content {
     transform: skewX(10deg);
     background-size: cover;
     background-position: 50%;
     height: 100%;
   }
}

}

Answer 1

如果您倾斜容器，则必须反转内容。

Skew是对整个DOM节点的转换，意味着它的所有子节点将立即被转换：你无法阻止传播。

.parent{
  transform: skewX(-10deg);
}

.child {
  transform: skewX(10deg);
}

Here is your updated fiddle

使倾斜容器内的背景图像看起来不偏斜

1 个答案: