自身のブログ take4itsのコゴト のトップページはメニューのボタンを大きく構えております。
デザインセンスなんて皆無なので、思いついたままこの形にしました。最初は静的サイトで運用していましたので、メニューはカテゴリ分けにしてブログの記載内容を絞ってしまおうと考えていました。
その後、ネタが続かず後悔するのですが、、、
静的ページでしたので更新もブログ感覚で出来ず、都度HTMLを編集していました。面倒くさいですよね。そこでWordPressに移行した訳です。
ちょっと話がタイトルとそれそうです（笑）ともあれ、トップページのメニュータイトルを今まではhoverすると斜めに傾けるようにしていましたが、飽きてきた＆他を試したいということで、この度変更してみました。
ちなみに今までのCSSは以下です。
※斜めにするためのプロパティのみにしております。あしからず。
li {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li:hover {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
transitionの設定はそのままでhover時のtransformの設定を今回は拡大する内容に変更してみたいと思います。
li {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
li:hover {
-webkit-transform: scale( 1.05 );
-moz-transform: scale( 1.05 );
-o-transform: scale( 1.05 );
-ms-transform: scale( 1.05 );
transform: scale( 1.05 );
}
変更点は、transform: rotate(-2deg); → transform: scale( 1.05 );だけです。
無事トップページメニューのhover時の動きが斜め → 拡大に変更されました。
transitionで時間的変化の設定を入れて、transformで、要素にマトリクス変形、移動、縮尺、回転、傾斜などの変形を適用するということですね。
ここでは細かい説明などは書きません。ググってください。（無責任ですかね。。。）
今後こういった内容をネタに書く時はなるべくシンプルに、何をどうしたら、こうなった。
といった感じで書きたいと思っております。
