裏返った文字を使ったCSSテキストデザインサンプル集

2021-06-072021-06-09CSS テキストデザイン サンプル集,CSS

裏返ったテキスト、左右反転した文字、または上下反転した文字を使ったCSSテキストデザインサンプル集です。

テキストを反転させる

テキストを反転させたテキストデザインのサンプルコードです。

See the Pen CSS | Flipped horizontally text design 01 by yochans (@yochans) on CodePen.

<div class="container">
	<p class="text">FRIPPD TEXT</p>
	<p class="text">反転文字</p>
</div>

pタグ全体を反転させていますので、文字列の順番も逆になります。

上下反転を実装する場合は、rotateYではなくrotateXを指定します。

.text{
	font-family: 'arial black';
	font-size: 60px;
	text-align: center;
	padding: 0;
	margin: 0;
	transform: rotateY(-180deg);
}

特定の文字だけ左右反転させる

テキストの中の特定の文字のみを反転させたCSSサンプルコードです。

See the Pen CSS | Flipped horizontally text design 03 by yochans (@yochans) on CodePen.

現在のCSSは、n文字目という指定方法がないため、少々面倒ですが反転させたい文字をspanタグで括ります。

<div class="container">
	<p class="text">F<span>R</span>IPPD T<span>E</span>XT</p>
	<p class="text">反<span>転</span>文字</p>
</div>

CSSでは、spanタグに対してtransform文字を反転させています。

spanタグはdisplayプロパティのデフォルト値がinlineでwidthを持っていないため、「display: inline-block」を指定する必要があります。

.text{
	font-family: 'arial black';
	font-size: 60px;
	text-align: center;
	padding: 0;
	margin: 0;
}

.text span{
	display: inline-block;
	color: red;
	transform: rotateY(-180deg);
}

順序はそのままにテキストを反転させる

順序はそのままにテキストを反転させるサンプルコードです。

See the Pen CSS | Flipped horizontally text design 03 by yochans (@yochans) on CodePen.

特定の文字を反転させた方法で、すべての文字をすべての文字をで括っています。

<div class="container">
	<p class="text"><span>F</span><span>R</span><span>I</span><span>P</span><span>P</span><span>D</span> <span>T<span>E</span>X</span><span>T</span></p>
	<p class="text"><span>反</span><span>転</span><span>文</span><span>字</span></p>
</div>
<hr>

CSSコードは同じになります。

上下反転を実装する場合は、rotateYではなくrotateXを指定します。

.text{
	font-family: 'arial black';
	font-size: 60px;
	text-align: center;
	padding: 0;
	margin: 0;
}

.text span{
	display: inline-block;
	transform: rotateY(-180deg);
}