以下、同じように画像を並べます。(省略)
* { 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