ザリガニデザインオフィス

ABBAをWeb上で正しく表示する方法のサムネイル

ABBAをWeb上で正しく表示する方法

スウェーデンのアーティストABBAですが、ABBAの2つ目のBは逆向きが正しい表記になります。
小ネタですが。正しい表記を画像ではなくテキストで実装する方法です。

ABBA

実装方法

やりかたは至って単純で、2つ目のBにspanタグで囲って、display: inline-blocktransform: scaleX(-1)のCSSをあてているだけです。

A<span style="transform: scaleX(-1); display: inline-block;">B</span>BA

scaleX(-1)で鏡写し

ポイントはscaleXに-1を掛けると鏡写しになることです。これを応用すると、スライダーの矢印の画像も1つだけ用意すれば左右両方に使えます。

transform: scaleX(-1)は上手く使うと便利ですね。