html - 旋转 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);
}