旋转背景图像高度 100%

Question

我试图让我的图像响应一些旋转角度 (10 度)，但我的高度增加太多，而且它不在中心和全宽。

这是设计（颜色是背景图片），正如你所看到的，随着旋转，我无法填充所有的顶部和底部，另一个问题是我的身高增加了。

*CSS：代码

.rotate > div {
    transform: scale(1) rotate(-10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
  }
.rotate > div > div > div {
   transform: scale(1) rotate(10deg) translateX(0px) translateY(0px) skewX(0deg) skewY(0deg);
}
.full {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  .list {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .item {
    height: 50%;
  }
  .wrapper {
    width: 100%;
    height: 100%;
  }

非常感谢你们。

Answer 1

在伪元素中使用图像并允许一些溢出来覆盖白色 space:

body {
 margin:0;
 min-height:500px;
 height:100vh;
 overflow:hidden;
}
.box {
  height:50%;
  box-sizing:border-box;
  position:relative;
}
.box:before {
  content:"";
  position:absolute;
  top:-40%;
  left:-10%;
  right:-10%;
  bottom:-40%;
  transform:rotate(-10deg);
  background:var(--i) center/cover no-repeat;
}
.box.first::before {
  bottom:0;
}
.box.last::before {
  top:0;
}

<div class="box first" style="--i:url(https://picsum.photos/1000/800?image=0)">

</div>
<div class="box last" style="--i:url(https://picsum.photos/1000/800?image=1069)">

</div>

旋转背景图像高度 100%

Rotate background image height 100%

html

css

css-transforms