堆叠几个小div或图像彼此相邻

Question

我正在尝试将几个div添加到彼此旁边，并使它们像下面一样响应。它不应该是倾斜的，而是只有几个div堆叠在一起并仍然响应？如何获得以下？如果通过它会更容易。图片？我如何将它们堆叠在一起并使它们响应？

Answer 1

以下是一个示例：jsBin responsive

这是无响应的

body{ /* or a DIV parent */
  perspective: 1000px;
}

div{
  padding: 60px;
  white-space: nowrap;
  transform: rotate3d(-20, -20, 15, -40deg);
}

div span{
  display: inline-block;
  width: 50px;
  height: 50px;
  color: #fff;
  font: bold 2em/1.5 sans-serif;
  text-align: center;
  margin:2px;
}
.W{background:#55CA55;}
.L{background:#D52A30;}
.D{background:#CCDC31;}

<div>
  <span class=W>W</span>
  <span class=W>W</span>
  <span class=L>L</span>
  <span class=W>W</span>
  <span class=L>L</span>
  <span class=W>W</span>
  <span class=D>D</span>
</div>