【CSS】要素の回転

私の主な仕事である『ホームページ作成』の中から、
CSSの小技について、これから4回に渡って紹介していきたいと思います。
第1回目の今回は『要素の回転』についてです。

文章や写真を斜めに表示したい

文章や写真や画像などを斜めに表示したい場合、以前のやりかたでは“斜めに配置した状態の画像を作成する”であったり、“FLASHやJavaScriptを用いる”形で表現していました。
CSS3では『要素の回転』と言う表現が出来るようになりましたので、こちらを使って文章や画像を斜めに表示します。

CSSで表現することの利点

ほんの数行の記述によって様々な回転の表現が出来ます。
また、他のCSSの手法を組み合わせることで簡単にアニメーションすることも可能です。
これらを以前の手法（斜めの状態の画像やFLASH等）と比較して、CSSで表現することには下記の利点があります。

・webサイトが軽くなる。
・角度調整やテキスト更新などのメンテナンス性が上がる。
・文章が検索エンジンでヒットする。（SEO対策）

1.要素の回転

文章だけ、画像だけを斜めにすることも出来ますが、文章と画像をひとまとめにして回転することも出来ます。

HTML

<ul>
	<li>
		<img src="common/images/test.png" alt="">
		<span>回転なし</span>
	</li>
	<li>
		<img src="common/images/test.png" alt="">
		<span>-10度回転</span>
	</li>
	<li>
		<img src="common/images/test.png" alt="">
		<span>-5度回転</span>
	</li>
	<li>
		<img src="common/images/test.png" alt="">
		<span>5度回転</span>
	</li>
	<li>
		<img src="common/images/test.png" alt="">
		<span>10度回転</span>
	</li>
</ul>

CSS

ul {
	width: 1200px;
}

ul li {
    background: #999999;
	width: 200px;
	margin: 10px;
	float: left
}

ul li span {
	display: block;
	margin: 0.5em;
}

ul li:first-child {
    transform: rotate(0deg);
}

ul li:nth-child(2) {
    transform: rotate(-10deg);
}

ul li:nth-child(3) {
    transform: rotate(-5deg);
}

ul li:nth-child(4) {
    transform: rotate(5deg);
}

ul li:nth-child(5) {
    transform: rotate(10deg);
}

2.奥行き方向（3D）の回転

X軸、Y軸を軸に回転した状態で表示することも出来ます。

HTML

<ul>
	<li>
		<img src="common/images/test.png" alt="">
		<span>回転なし</span>
	</li>
	<li>
		<img src="common/images/test.png" alt="">
		<span>Y軸　45度</span>
	</li>
	<li>
		<img src="common/images/test.png" alt="">
		<span>Y軸　-45度</span>
	</li>
	<li>
		<img src="common/images/test.png" alt="">
		<span>X軸　45度</span>
	</li>
	<li>
		<img src="common/images/test.png" alt="">
		<span>X軸　-45度</span>
	</li>
</ul>

CSS

ul {
	width: 1200px;
}

ul li {
    background: #999999;
	width: 200px;
	margin: 10px;
	float: left;
}

ul li span {
	display: block;
	margin: 0.5em;
}

ul li:first-child {

}

ul li:nth-child(2) {
	transform-style: preserve-3d;
	transform: perspective(1000px) rotateY(45deg);
}

ul li:nth-child(3) {
	transform-style: preserve-3d;
	transform: perspective(1000px) rotateY(-45deg);
}

ul li:nth-child(4) {
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transform: perspective(1000px) rotateX(45deg);
}

ul li:nth-child(5) {
	transform-style: preserve-3d;
	transform: perspective(1000px) rotateX(-45deg);
}

3.アニメーションを用いて回転する画像

アニメーション機能を利用して回転し続ける画像やテキストを配置することが出来ます。

HTML

<div class="spin">
	<img src="common/images/test.png" alt="">
	<span>要素の回転</span>
</div>

CSS

div {
	background: #999999;
	margin: 100px;
	width: 200px;
	height: 200px;
}

span {
	display: block;
	margin: 0.5em;
}

.spin {
	animation: spin 5s linear infinite;
}

@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}