旋转 div 并创建类似的布局

Question

我正在尝试根据所附图片创建布局，但在中间迷失了方向，并且对如何处理它感到困惑，有人可以提供有关实现它的最佳方法的想法吗？

请记住，每个框都会有悬停效果。

我已经尝试创建了，这是我的 code

CSS

 body{overflow:hidden;}
.row{width:100%; float:left; border:2px solid #f00; border-left:0; border-right:0; -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -o-transform: rotate(-30deg); -ms-transform: rotate(-30deg); transform: rotate(-30deg);}
.row > .col33{float:left; width:33%; height:350px; display:block;}
.row:nth-child(1){margin:0 0 0 -250px ;}
.row:nth-child(2){margin:-133px 0 0 -120px; width:120%;}

HTML

<div class="row">
   <div class="col33">Content Goes here</div>
   <div class="col33">Content Goes here</div>
   <div class="col33">Content Goes here</div>
</div>
<div class="row">
   <div class="col33">Content Goes here</div>
   <div class="col33">Content Goes here</div>
   <div class="col33">Content Goes here</div>
</div>

Answer 1

我为你制作了这个代码笔，如果你需要更多帮助，请告诉我： http://codepen.io/bra1N/pen/RRqYPX

HTML:

<div class="container">
  <div class="row">
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
    <div class="col-md-3"></div>
  </div>
</div>

CSS:

.col-md-3{
  border: 1px solid black;
  height: 240px;
  background: cyan;
  -ms-transform: skewY(-40deg); /* IE 9 */
  -webkit-transform: skewY(-40deg); /* Safari */
  transform: skewY(-40deg);
}

Answer 2

.rotetedDiv{
  border: 1px solid gold;
  height: 300px;
  background: #600;
  -ms-transform: skewY(-35deg); /* IE 9 */
  -webkit-transform: skewY(-35deg); /* Safari */
  transform: skewY(-35deg);
}

<div class="container">
  <div class="row">
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
    <div class="rotetedDiv"></div>
  </div>
</div>

旋转 div 并创建类似的布局

Rotate div and create similar layout

html

css

css-transforms