spanタグのテキストに角度を付けるCSSサンプル

2022-06-28CSS テキストデザイン サンプル集,CSS

CSSで<span>タグのテキストに角度を付ける方法とサンプルコードを紹介しています。

spanタグのテキストに角度を付ける

<span>タグでテキストの各文字毎に角度を付けたCSSの動作サンプルになります。

See the Pen CSS animation with wavy text by yochans (@yochans) on CodePen.

HTMLにはclass名「rotate-text」とした<p>タグ、その中に各文字を<span>タグで指定しています。

<p class="rotate-text"><span>O</span><span>N</span><span>E</span><span> </span><span>N</span><span>O</span><span>T</span><span>E</span><span>S</span></p>

<span>タグに「transform」プロパティを反映させる為に「display」プロパティで「inline-block」を指定しておきます。

サンプルでは疑似クラス「nth-child(n)」にて「transform: rotate()」を使って文字毎の違った角度を付けています。

.rotate-text {
	font-size: 35px;
	font-weight: bold;
	color: #00bfff;
	letter-spacing: 20px;
}

.rotate-text span {
	display:inline-block;
	transform: rotate(-20deg);
}

/* rotate*/
.rotate-text span:nth-child(4n + 1) {
		transform: rotate(-20deg);
}

.rotate-text span:nth-child(4n + 2) {
		transform: rotate(20deg);
}

.rotate-text span:nth-child(4n + 3) {
		transform: rotate(-20deg);
}

.rotate-text span:nth-child(4n + 4) {
		transform: rotate(20deg);
}