CSS倾斜div几度与背景图像

Question

我创造了3个div，每个宽33％，我想倾斜几度。 第一个和最后一个div不应该是倾斜的，因此它只适用于内部内容。这也是因为我想在不久的将来添加4个div（25％宽度）。

我还希望在悬停时使背景更宽。因此，其他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/

我想要的是什么：

Answer 1

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

请尝试以下代码，当您将鼠标悬停在它们上时会增加div size。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;