新潟県妙高市|ホームページと広告の相談相手

MENU [+]閉じる [×]
要素を好きな角度だけ回転させる方法【CSS3】

ホームページをデザインするとき、ページ内のちょっとした要素に「角度」をつけたくなることがありませんか?

「新着情報の一覧ページが、長方形の写真や四角いボタンばっかりで、ちょっと味気ない印象かな…。」

「せめて、この要素をクイッと斜めにすれば、ちょっと印象も変わるのになぁ…」

そのような状況にコーディング段階で対応するために、「要素を好きな角度だけ回転する方法」をご紹介します。

この記事の目次

【結論】要素を好きな角度だけ回転させるための記述

まずは結論から!

HTMLで組んだ要素を、好きな角度だけ回転させるための記述をご紹介します。

HTMLの記述(サンプルテキストと囲いのブロックのみ)

HTMLはここではサンプルテキストですが、実際の制作時には任意のテキスト&コードを入れてみてください(^^)

<div id="idName01">要素が回転します。</div>

class属性でもダメというわけではありません。

ダメではないと思いますが、「ページ内のこの要素を回転させたい!」というニーズにお応えするため、id属性に名前を設定しています。

CSSの記述(初期表示時すでに回転しているバージョン)

次はCSSの記述です。

「幅400pxで、文字の色が赤、背景色が黄色のブロックを、(左回りに)45度回転させる」

という記述は以下の通りです。

#idName01 {
	width:400px;
	color:#ff0000;
	background:#ffcc00;
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

上記のHTML&CSSの記述によって、回転した要素が表示されます。

ページの先頭へ戻る

[応用]マウスカーソルを当てたら回転させる方法

さて。

次は、要素の回転が「マウスカーソルをその要素に当てたとき」だけでOKの場合をどうするか、です。

まずは通常時・初期表示時のCSSです。

#idName01 {
	width:400px;
	color:#ff0000;
	background:#ffcc00;
	-moz-transition: -moz-transform 0.3s linear;
	-webkit-transition: -webkit-transform 0.3s linear;
	-o-transition: -o-transform 0.3s linear;
	-ms-transition: -ms-transform 0.3s linear;
	transition: transform 0.3s linear;
}

そして、マウスオーバー時のCSSの記述です。

幅・文字色・背景色を変えなくて良いなら、こちらには何も記述しなくてもOKです。

#idName01:hover {
	-moz-transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

幅・文字色・背景色の指定は任意(指定しなくても要素の回転には影響なし)です。

また[-moz-][-webkit-][-o-][-ms-]は主要ブラウザそれぞれに対応させるためのものですので、カギになるのは実質コレらです。

最小限に絞ります。

#idName01 {
	transition: transform 0.3s linear;
}
#idName01:hover {
	transform: rotate(-45deg);
}

上記は、マウスオーバーすると、初期状態から「0.3秒」かけて「linear(一定の速度)」で「マイナス45度(左回りに45度)」だけ回転するという動きになります。

実際、その動きを表現したものが下記の画像です。

[初期表示時]transition: transform 0.3s linear;を指定

[マウスオーバー時]transform: rotate(-45deg);を指定

上記のコードの例では、マウスオーバーすると、上記2つの画像間を0.3秒かけて動きます。

ページの先頭へ戻る

[応用]ホームページへの取り入れ方

さて、ここまでで、下記の2パターンをご紹介しました。

「初期表示時で好きな角度だけ回転させておく方法」

「マウスオーバーで好きな角度だけ回転させる方法」

これらは、どんな風に応用できるでしょうか??

例えば、冒頭で述べたような「単調なレイアウトに変化をつけたい場合」などはアリですよね(^-^)

「一覧画面の日付だけ、初期表示時に5度回転させておく」

だとか、あるいは、

「マウスでカーソルを当てた要素のみ、正方形に近いアイコンを45度傾けて【ひし形】のような形状にする」

などなど。

CSSのtransition属性やtransform属性は、指定できる値のバリエーションがたくさんあります。

こちらでご紹介した以外の「回転」の表現方法も可能なので、いろいろと調べて応用してみると、表現できる「幅」も広がると思います(^-^)

ページの先頭へ戻る

メールマガジンで最新情報をゲット!

当サイトの更新情報は、メールマガジンでもお知らせしております。
「思い出のカレンダー制作」に関する情報もあわせてどうぞ。

メールアドレスを入力してください

この記事の感想をお寄せください

[要素を好きな角度だけ回転させる方法【CSS3】]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

関連記事一覧:要素を好きな角度だけ回転させる方法【CSS3】

ホームページのコーディングをしている皆さんは、要素を中央寄せにしたい場合は、どんなコードを書かれていますか? 例えばテキストを画面の、あるいはエリアの中央 …… 続きを読む

ホームページ制作をしていると、フォームの項目の一つで「チェックボックス」というものを扱う機会はあるかと思います。 また、チェックボックスを含むフォーム関連 …… 続きを読む

ホームページ制作において、デザイン修正は様々な場面で発生することがあります。 文言を変更したい場合や、要素の並びを部分的に入れ替えたい場合など、状況に応じ …… 続きを読む

皆さんは、ホームページのデザインを、どのページから始めるのが良いか、お考えになったことはありますか? もちろん、すべての場合に当てはまる正解などありません …… 続きを読む

Copyright (C) 妙高Web屋 All Rights Reserved.