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

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

我看到您已经为 left 和 width 设置了硬编码值，这是一个更新版本，其中包含计算 left 和 widtdh：

/* Calculate how much wider the image is than the original image after skewing it */
function calcSkewWidth(degrees, height) {
  return Math.tan(degrees * Math.PI / 180) * height;
}

window.addEventListener('load', (event) => {
  [...document.querySelectorAll('img')].forEach(img => {
    const skewWidth = calcSkewWidth(12, img.offsetHeight);
    img.style.width = `calc(100% + ${skewWidth * 2}px)`;
    img.style.left = `-${skewWidth / 2}px`
  })
});

https://jsfiddle.net/70rombdv

Answer 2

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

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

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

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

Here is your updated fiddle