アニメーション

CSSだけで作る奥行きのあるスライダー

投稿日 2026/01/29

更新日 2026/1/26

CSSだけで、どこまでリッチな表現ができるのか。
その一例として、3D空間上を回転するスライダーを実装しました。

本デモでは JavaScript を使わず、CSS の transform と animation のみで、複数の画像が奥行きを持って回転する表現を実現しています。

画像を横長の比率にすることで、風景写真やビジュアル素材にも使いやすい構成になっています。

Preview プレビュー

Code コード

HTML

<div class="kumonosu-sliderWrap">
	<div class="kumonosu-slider" style="--img-count: 7;">
		<h1 class="kumonosu-slider__title">Scenic Gallery</h1>
		<figure class="kumonosu-slider__item" style="--img-num: 0;">
			<img src="https://picsum.photos/640/360?random=10" alt="Landscape" class="kumonosu-slider__img" />
		</figure>
		<figure class="kumonosu-slider__item" style="--img-num: 1;">
			<img src="https://picsum.photos/640/360?random=21" alt="Architecture" class="kumonosu-slider__img" />
		</figure>
		<figure class="kumonosu-slider__item" style="--img-num: 2;">
			<img src="https://picsum.photos/640/360?random=32" alt="Nature" class="kumonosu-slider__img" />
		</figure>
		<figure class="kumonosu-slider__item" style="--img-num: 3;">
			<img src="https://picsum.photos/640/360?random=43" alt="Ocean" class="kumonosu-slider__img" />
		</figure>
		<figure class="kumonosu-slider__item" style="--img-num: 4;">
			<img src="https://picsum.photos/640/360?random=54" alt="Forest" class="kumonosu-slider__img" />
		</figure>
		<figure class="kumonosu-slider__item" style="--img-num: 5;">
			<img src="https://picsum.photos/640/360?random=65" alt="City" class="kumonosu-slider__img" />
		</figure>
		<figure class="kumonosu-slider__item" style="--img-num: 6;">
			<img src="https://picsum.photos/640/360?random=76" alt="Mountain" class="kumonosu-slider__img" />
		</figure>
	</div>
</div>

CSS

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	background-color: #111;
	color: #fff;
	font-family: sans-serif;
	overflow: hidden;
}
.kumonosu-sliderWrap {
	width: 100%;
	height: 100vh;
	overflow: hidden;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	touch-action: none;
}
.kumonosu-slider {
	/* 画像サイズを小さく調整 (40vw/60vh -> 25vw/40vh) */
	--slider-width: min(25vw, 40vh);
	--slider-depth: min(80vw, 120vh);
	--slider-radius: 0.5;
	--slider-time: 25;
	width: var(--slider-width);
	height: calc(var(--slider-width) * 9 / 16);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform-style: preserve-3d;
	animation: kumonosu-sliderAnim calc(var(--slider-time) * 1s) linear infinite;
}
/* モバイル向け調整 */
@media screen and (max-width: 768px) {
	.kumonosu-slider__title {
		font-size: 1.2rem !important;
	}
}
@keyframes kumonosu-sliderAnim {
	from {
		transform: translate(-50%, -50%) perspective(var(--slider-depth)) rotateX(-10deg) rotateY(0deg);
	}
	to {
		transform: translate(-50%, -50%) perspective(var(--slider-depth)) rotateX(-10deg) rotateY(360deg);
	}
}
.kumonosu-slider__title {
	font-size: 2.5rem;
	white-space: nowrap;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	animation: kumonosu-sliderTitleAnim calc(var(--slider-time) * 1s) linear infinite;
	pointer-events: none;
	z-index: 1;
	opacity: 0.8;
}
@keyframes kumonosu-sliderTitleAnim {
	0% {
		transform: translate(-50%, -50%) rotateY(0deg);
	}
	100% {
		transform: translate(-50%, -50%) rotateY(-360deg);
	}
}
.kumonosu-slider__item {
	border-radius: 6px;
	box-shadow: 4px 4px 16px -2px rgba(0, 0, 0, 0.4);
	overflow: hidden;
	position: absolute;
	inset: 0;
	transform: rotateY(calc(var(--img-num) * (360 / var(--img-count)) * 1deg)) translateZ(calc(var(--slider-depth) * var(--slider-radius)));
}
.kumonosu-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: bottom;
}