【React】ロゴの周りを回転するテキストを実装する（CSS in JS）

概要

ロゴ画像の周りを回転するテキストを実装します。
CSS in JSとして、emotion/cssを使用します。

> ウールーについて

本記事は、以下の動画をReactに変換したものです。（ほぼ写経です）

実装

.tsx

import React, { VFC } from 'react';
import { css, keyframes } from '@emotion/css';

export const CircleTextLogo: VFC = () => {
	const text = 'No.831 ウールー - 分類：ひつじポケモン - 特性：もふもふ・にげあし'

	return (
		<div className={styles.circle}>
			<div className={styles.logo}></div>
			<div className={styles.text}>
				{text.split('').map((char, i) => (
					<span key={i} className={styles.char(i * 9)}>
						{char}
					</span>
				))}
			</div>
		</div>
	)
}

const animations = {
	rotateText: keyframes`
    0% {
      transform: rotate(360deg);
    }
    100% {
      transform: rotate(0deg);
    }
  `
}

const sizePx = 300

const styles = {
	circle: css`
		position: relative;
		width: ${sizePx}px;
		height: ${sizePx}px;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	`,
	logo: css`
		position: absolute;
		width: ${sizePx - 50}px;
		height: ${sizePx - 50}px;
		background-image: url('/assets/u-ru-.png');
		background-size: cover;
		border-radius: 50%;
	`,
	text: css`
		font-family: Consolas;
		font-size: 1.3rem;
		color: #fcfafc;
		position: absolute;
		width: 100%;
		height: 100%;
		animation: ${animations.rotateText} 10s linear infinite;
	`,
	char: (rotateDeg: number) => css`
		position: absolute;
		left: 50%;
		transform: rotate(${rotateDeg}deg);
		transform-origin: 0 ${sizePx / 2}px;
	`
}

ポイントは、テキストを1文字ずつ分割して、それぞれを少しずつ回転させているところです。

styles.char(i * 9)で、1文字を+9度ずつ回転させています。CSS in JSを使う理由は、このようにスタイルに動的な変数を取るためです。
文字の回転度数やサイズは、実際にブラウザで見ながら調整しています。