代码之家 › 专栏 › 技术社区 › Alberto Acuña

旋转背景图像高度100%

css-transforms css3 css html

0

Alberto Acuña · 技术社区 · 7 年前

我试图使我的图像有一些旋转角度(10度)的反应,但我的高度增加太多,它不是在中心和全宽。

(颜色是背景图像),正如你所见,随着旋转,我无法填充所有的顶部和底部,另一个问题,是我的全高增加。

.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%;
  }

非常感谢你们。

1 回复 | 直到 7 年前

1

Temani Afif 7 年前

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

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>