アニメーション

CSSだけで作る、立体的に回転する奥行きのある全画面スライダー

投稿日 2026/02/07

更新日 2026/2/2

画像スライダーはよく見かけますが、奥行きや立体感が加わるだけで、印象は大きく変わります。

このデモは、CSSだけを使って画像が円状に並び、立体的に回転し続けるスライダーを実装したものです。
JavaScriptを使わず、CSSの3D変形とアニメーションだけで構成しています。

Preview プレビュー

Code コード

HTML

<div class="kumonosu-scene">
    <div class="kumonosu-a3d" style="--n: 12">
        <!-- 直接画像を記述 -->
        <img class="kumonosu-card" style="--i: 0" src="https://picsum.photos/400/600?random=1" alt="image">
        <img class="kumonosu-card" style="--i: 1" src="https://picsum.photos/400/600?random=2" alt="image">
        <img class="kumonosu-card" style="--i: 2" src="https://picsum.photos/400/600?random=3" alt="image">
        <img class="kumonosu-card" style="--i: 3" src="https://picsum.photos/400/600?random=4" alt="image">
        <img class="kumonosu-card" style="--i: 4" src="https://picsum.photos/400/600?random=5" alt="image">
        <img class="kumonosu-card" style="--i: 5" src="https://picsum.photos/400/600?random=6" alt="image">
        <img class="kumonosu-card" style="--i: 6" src="https://picsum.photos/400/600?random=7" alt="image">
        <img class="kumonosu-card" style="--i: 7" src="https://picsum.photos/400/600?random=8" alt="image">
        <img class="kumonosu-card" style="--i: 8" src="https://picsum.photos/400/600?random=9" alt="image">
        <img class="kumonosu-card" style="--i: 9" src="https://picsum.photos/400/600?random=10" alt="image">
        <img class="kumonosu-card" style="--i: 10" src="https://picsum.photos/400/600?random=11" alt="image">
        <img class="kumonosu-card" style="--i: 11" src="https://picsum.photos/400/600?random=12" alt="image">
    </div>
</div>

CSS

/* ====== Relevant CSS ====== */
.kumonosu-scene, .kumonosu-a3d {
	display: grid;
}
.kumonosu-scene {
	/* prevent scrollbars */
	overflow: hidden;
	/* for 3D look; smaller = more extreme effect */
	perspective: 35em;
	/* lateral fade */
	mask: linear-gradient(90deg, #0000, red 20% 80%, #0000);
	/* Safari用のマスク指定 */
	-webkit-mask: linear-gradient(90deg, #0000, #000 20% 80%, #0000);
	/* 全画面表示 */
	width: 100vw;
	height: 100vh;
}
.kumonosu-a3d {
	place-self: center;
	/* middle align */
	/* don't flatten 3D transformed children */
	transform-style: preserve-3d;
	animation: kumonosu-ry 32s linear infinite;
}
/* simplest y axis rotation */
@keyframes kumonosu-ry {
	to {
		transform: rotateY(1turn);
	}
}
.kumonosu-card {
	/* base card width */
	--w: 17.5em;
	/* compute base angle corresponding to a card */
	--ba: calc(1turn / var(--n));
	grid-area: 1/ 1;
	/* stack in same one grid cell */
	width: var(--w);
	aspect-ratio: 7/ 10;
	object-fit: cover;
	border-radius: 1.5em;
	/* don't want to see back of cards in front of screen plane */
	backface-visibility: hidden;
	/* 
        3D transform chain:
        rotate, then translate along z axis 
    */
	transform:
		rotateY(calc(var(--i) * var(--ba))) translateZ(calc(-1 * (.5 * var(--w) + .5em) / tan(.5 * var(--ba))));

	background: #222;
	/* 画像読み込み前の色 */
}
@media (prefers-reduced-motion: reduce) {
	.kumonosu-a3d {
		animation-duration: 128s;
	}
}

/* ====== General page prettifying and layout ====== */
html, body {
	display: grid;
	margin: 0;
	padding: 0;
}
html {
	height: 100%;
}
body {
	background: #000;
}