2018年04月19日(木)

CSSだけで3Dなカルーセル

• 0
• 10
• 13
• 37

Result

See the Pen 3D Slider | Pure CSS by kachibito (@kachibito) on CodePen.

数年前に見かけた懐かしい感じの3Dなカルーセルです。
CSSだけで出来る時代になりましたね。

css

#slideshow {/*全体*/ margin: 0 auto; padding-top: 50px; height: 600px; width: 100%; background-color: #ddd; box-sizing: border-box; } .entire-content {/*カルーセルの見栄え。perspectiveで奥行きを設定する*/ margin: auto; width: 190px; perspective: 1000px; position: relative; padding-top: 80px; } .content-carrousel {/*各画像を包括、アニメーションを設定*/ width: 100%; position: absolute; float: right; animation: rotar 15s infin...