css-Gallery

* { margin: 0; padding: 0; }
body {
  font-family: Arial, sans-serif;
  background-image: url('./img/w-stone14.jpg');
  background-repeat: repeat;
} 
#gallery {
  width: 80%;
  margin: 1em auto;
  display: flex;/* 親要素 flexコンテナ */
  flex-flow: wrap;/* 折り返し */
}
#gallery img {
  width: 100%;
  height: auto;
  border: none;
  max-width: 380px;/* 大きくなり過ぎないように */
  margin: 1em 0;
  padding: 8px; /* 写真外枠を白フチに */
  background: #fff;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.7);
}
#gallery p {
  flex: 260px;/* 子要素 flexアイテム */
}
.pic-r1 {
  z-index: 2;
  transform: rotate(-10deg);
}
.pic-r2 {
  z-index: 5;
  transform: rotate(15deg);
}
.pic-r3 {
  z-index: 3;
  transform: rotate(5deg);
}
.pic-r4 {
  z-index: 5;
  transform: rotate(-3deg);
}
.pic-r5 {
  z-index: 5;
  animation: animation-1 4s infinite ease 1s both;
}              /* アニメでお遊びです */
@keyframes animation-1 {
  from {
    transform: rotate(8deg);
  }
  to {
    transform: rotate(-15deg);
  }
}

http://www7b.biglobe.ne.jp/~homepage-note/css-base-7.html
http://www7b.biglobe.ne.jp/~homepage-note/css-base-7.html#css-layout-12