CSS | 3Dなサッカーボールの作り方

2021-06-22CSS 3D デザイン,CSS

CSSで立体感のあるサッカーボールを作成してクルクル回す方法を紹介しています。

See the Pen CSS | Soccer ball by yochans (@yochans) on CodePen.

（エセ）球体の作り方について以下の記事で紹介しています。

CSS | 3Dな球体の作り方2

CSSで円に影を付けて立体的な球体を作成する方法です。 See the Pen CSS | 3D Sphere 2 by yochans (@y ...

 https://1-notes.com/css-3d-sphere-design-2/

立体的なサッカーボールを作成する方法

立体的なサッカーボールを作成してCSSアニメーションで回転させるサンプルコードです。

3D、立体と記述していますが、サッカーボール柄を移動させてそれっぽく見せているだけです。

<div class="soccer-ball"></div>

テクスチャ画像として適当に作ったシームレスなサッカーボール柄を利用しています。

background: urlで画像ファイルのパスとrepeatを指定する事で繰り返し描画に設定します。

background-sizeで画像の表示サイズを調節しています。

.soccer-ball {
	width: 150px;
	height: 150px;
	margin: 30px;
	border-radius: 50%;
	position: relative;
	background: url('https://raw.githubusercontent.com/Yousuke777/texture/main/soccer-ball-02.png') repeat;
	background-size: 200%;
	box-shadow: -20px -10px 30px rgba(0, 0, 0, .75) inset;
	animation: rotate-anim 2s linear infinite;
}

疑似要素のafterは、影を表示している部分です。

filterのblur()を利用していますが、shadow系のプロパティを利用したほうが、見栄え良くできるかもしれません。

.soccer-ball:after {
	content: "";
	position: absolute;
	bottom: -5px;
	margin: auto;
	width: 80px;
	height: 5px;
	border-radius: 50%;
	background: #000;
	filter: blur(5px);
	z-index: -1;
}

サッカーボールをクルクル回転させるアニメーション。

background-positionでテクスチャの位置を変更することでそれっぽく見せているだけです。

縦回転も最初に作成したサッカーボール柄では上手くいっていたのですが、作り直したらビコッってなるようになってしまいました。

縦回転の場合、％より画像の高さをpxで指定します。

@keyframes rotate-anim {
	100% {
		background-position: -100% 0;
	}
}