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

妙高Web屋

お仕事のご依頼お見積りのご依頼

Web制作

要素を好きな角度だけ回転させる方法【CSS3】

2018.3.7 2019.1.15

要素を好きな角度だけ回転させる方法【CSS3】
Web制作 0 0

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

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

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

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

この記事の目次

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

まずは結論から!

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属性は、指定できる値のバリエーションがたくさんあります。

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

ページの先頭へ戻る

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

こちらの記事をご覧いただき、感じたことなどありましたら下記のボタンを押していただき「感想投稿フォーム」よりお気軽にご感想をお寄せください。

この記事の感想を投稿する
0 0

LINE@始めました!

妙高Web屋ではこのたび、LINE@(ラインアット)を始めることとなりました。

企業やお店のWeb担当者さまへ向けて、ホームページの運営・管理・更新に関する情報を発信していきます。

情報を購読できる「友だち」へのご登録は、下記のボタンよりお願いいたします。

目的のページは見つかりましたか?

お探しのページが見当たらない場合は、キーワードを手がかりに、サイト内検索をご利用ください。

または、下記のボタンより「サイトマップ」のページにアクセスしていただき、お探しください。

目的のページは見つかりましたか?
Twitterでシェアする Twitterでシェアする Facebookでシェアする Facebookでシェアする Feedlyで購読する Feedlyで購読する お問い合わせお問い合わせ ページの先頭へページの先頭へ