CSS倾斜带有背景图的div几度

Question

我创建了三个宽度为33%的div，我想让它们倾斜几度。第一个和最后一个div不应该倾斜，因此只对内部内容起作用。这也是因为我将来想要添加4个宽度为25%的div。

我还希望在鼠标悬停时扩大具有背景的div的宽度。这样其他div将变为30%，悬停时的那个div将变为40%。

注意：我不想旋转图像本身，只想旋转div。图像应以无旋转方式放置。

我无法用CSS解决这个问题。

我的当前代码:

<div class="divisions">

<div class="col-sm-4 division hosting">
<div class="inner">

</div>
</div>

<div class="col-sm-4 division shop">
<div class="inner">

</div>
</div>

<div class="col-sm-4 division solutions">
<div class="inner">

</div>
</div>

</div>

JSFiddle: https://jsfiddle.net/1cwxLw7h/2/

我想要的是：

- JGeer

Answer 1

body {margin: 0px;}

.divisions .col-xs-4 {
  padding: 0;
}
.divisions .division {
  transition: width 0.25s linear;
}
.divisions:hover .division {
  width: 31%;
}
.divisions:hover .division:hover {
  width: 38%;
}
.divisions .solutions .inner {
  height: 100%;
  min-height: 750px;
  background: url(http://67.media.tumblr.com/f3ed524eaf11c7095fc583390eb346be/tumblr_oaj4d1Uh0n1teue7jo1_1280.jpg) center center no-repeat;
  background-size: cover;
}
.divisions .shop .inner {
  height: 100%;
  min-height: 750px;
  background: url(http://65.media.tumblr.com/8b638bda48df96a5350d7dd3796e459c/tumblr_oaj43tSwts1teue7jo1_1280.jpg) center center no-repeat;
  background-size: cover;
}
.divisions .hosting .inner-holder {
  transform: skewX(-4deg);
  position: relative;
  overflow: hidden;
  margin: 0 -30px;
  z-index: 5;
}
.divisions .hosting .inner {
  height: 100%;
  min-height: 750px;
  background: url(http://67.media.tumblr.com/43a177556b301a8dc5cb45145050853b/tumblr_oaj40xITvh1teue7jo1_1280.jpg) center center no-repeat;
  background-size: cover;
  transform: skewX(4deg);
  margin: 0 -30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="divisions">

  <div class="col-xs-4 division solutions">
    <div class="inner">

    </div>
  </div>

  <div class="col-xs-4 division hosting">
    <div class="inner-holder">
      <div class="inner">

      </div>
    </div>
  </div>

  <div class="col-xs-4 division shop">
    <div class="inner">

    </div>
  </div>

</div>

- Mohammad Usman

---

@HenkZ 你正在使用Bootstrap的列，它们为每个列定义了预定义的宽度。最好不要更改它们。如果非常必要，那么最好使用没有Bootstrap类的列。 - Mohammad Usman

@HenkZ 这是一个可能的变体。你可以在这里进行尝试 https://jsfiddle.net/1cwxLw7h/12/ - Mohammad Usman

谢谢！但实际上这确实包括了所有3个div。我想使用像这样的东西：https://jsfiddle.net/1cwxLw7h/13/。但是，如何为其他div实现相同的效果呢？因为兄弟组合器无法向上工作。 - JGeer

@HenkZ 在CSS中不能选择前一个兄弟元素。您需要借助jQuery来解决问题。 - Mohammad Usman

非常感谢！那正是我所需要的。 - JGeer

Answer 2

尝试下面的代码，当你将鼠标悬停在它们上面时，它会增加

大小。

body {margin: 0px;}

.col-sm-4 {float: left; width: 33.33333333333333%; display: inline-block}
.divisions .solutions .inner {height: 100%; min-height: 750px; background: url(http://67.media.tumblr.com/f3ed524eaf11c7095fc583390eb346be/tumblr_oaj4d1Uh0n1teue7jo1_1280.jpg) center center no-repeat; background-size: cover}

.divisions .shop .inner {height: 100%; min-height: 750px; background: url(http://65.media.tumblr.com/8b638bda48df96a5350d7dd3796e459c/tumblr_oaj43tSwts1teue7jo1_1280.jpg) center center no-repeat; background-size: cover}

.divisions .hosting .inner {height: 100%; min-height: 750px; background: url(http://67.media.tumblr.com/43a177556b301a8dc5cb45145050853b/tumblr_oaj40xITvh1teue7jo1_1280.jpg) center center no-repeat; background-size: cover}
.divisions{
  width:100%;
  height:auto;
  overflow:hidden;
}
.divisions .solutions{
  transform:skew(-3deg);
  float:left;
  margin-left:-18px;
  transition:width 1s ease;
}
.divisions .solutions:hover{
  width:40%;
}
.divisions .hosting{
  transform:skew(-3deg);
  float:left;
  position:absolute;
  z-index:2;
  width:45%;
 transition:width 1s ease;
 }
.divisions .hosting:hover{
  width:50%;
}
.divisions .shop{
  transform:skew(-3deg);
  float:right;
  margin-right:-18px;
  transition:width 1s ease;
}
.divisions .shop:hover{
  width:45%;
}

<div class="divisions">

<div class="col-sm-4 division solutions">
<div class="inner">

</div>
</div>

<div class="col-sm-4 division hosting">
<div class="inner">

</div>
</div>

<div class="col-sm-4 division shop">
<div class="inner">

</div>
</div>

</div>

- frnt