• 車種別
  • パーツ
  • 整備手帳
  • ブログ
  • みんカラ+

TMJS60ULの"スタイルシート用" [その他 その他]

タブにマウスオーバーで動きを付ける方法

カテゴリ : その他 > その他 > その他
目的チューニング・カスタム
作業DIY
難易度
作業時間30分以内

作業日 : 2017年09月16日
1
ある方がやり方をアップされてたので早速やり方を実践してみました。

タブ
タブ(通常)のリンク(マウスオーバー)【ul#MainNav li a:hover】

縦回転
transition:2s;
transform:rotateX(360deg);
-webkit-transform:rotateX(360deg);
-ms-transform:rotateX(360deg);
を追加

横回転
transition:2s;
transform:rotateY(360deg);
-webkit-transform:rotateY(360deg);
-ms-transform:rotateY(360deg);
を追加

時計周りに回転
transition:2s;
transform:rotateZ(360deg);
-webkit-transform:rotateZ(360deg);
-ms-transform:rotateZ(360deg);
を追加(Zは省いても可)

ちなみに
(360deg);の中の数字は回転する角度、360だと1回転、720だと2回転、180だと半回転になります。

Z(360deg);をZ(-360deg);のすると反時計回りになります。

貼り付けた
transition:2s;
は回転する秒数で、少なくすると速く、多くすると遅く回転します。
自分は同じ場所に貼り付けてますが、ページの基本のリンク【a】等の全てに適応させる様な場所に貼り付けると個別にこのタグを貼り付ける必要がなくなります。
2
以前アップ(http://minkara.carview.co.jp/userid/585601/car/2334972/4132415/note.aspx)しましたが、自分は、マウスオーバーでピクッと動くこのようなタグ
position:relative;
bottom:-2px;
left:3px;
をリンクに貼り付けてまして、この状態だと回転とピクッと動くアクションが同時に起きてぎこちない動きになるので、回転のタグのところに
position:relative;
bottom:0px;
left:0px;
と動かない指定をしてやります。

画像はプレビューで時計回りの途中
動画は採用してる縦回転
3
回転ついでに…
自分はタブに角度を付けてますが、同じ種類のタグで

タブ(通常)のスタイル【ul#MainNav li.nav】

transform:rotate( 3deg );
を追加してます。

3は角度なので、3度傾けてるって事です。

コーティング

イイね!0件




 

入札多数の人気商品!

 

タグ

関連整備ピックアップ

古いクロモリロードのOH その4

難易度:

HADOOを修理する【再】

難易度:

ビエラリンクが通らないHDMI分配器の改良

難易度:

180211 ガレージ内人感センサーライト追加

難易度:

G27備忘録 スイッチBOX 2

難易度:

ビクターRC-T1MDドナーからのピックアップ交換

難易度:

関連リンク

この記事へのコメント

2017/09/16 19:57:08

こんばんは😄😄😄✨。

くるくる♬♬。
いい感じですよね👍👍👍。
コメントへの返答
2017/09/16 21:19:01
こんばんは~♪

良い感じですよね(*^_^*)

現状、マウスオーバーで縦回転してますが、クリックで横回転できないか色々試しましたが、上手く行きませんね~(;^ω^)
2018/01/20 23:51:01
こんばんは٩( ''ω'' )و✨

そのタグは とらんちょさん
と言う方のグループで拝見しました
わたしも早速 実用したのですが
感じよく@くるくる回っていますね♪

思わず 目がまわりそう(笑)(ノ´∀`*)
コメントへの返答
2018/01/21 00:04:48
こんばんは~♪

そうですね、ボクもとらんちょさんに教わって、タグ追加しました。
その機会に、とらんちょさんのグループにも入会しましたが、あの方の知識は半端ないですね。
自分でツール作ったりもしてるので為になります。

確かに目が回りそうですよね(笑)
なのでボクはタブのみを回転させる様にしました(笑)

みらい@さんはタブに縦回転とサイドメニューで横回転な感じですね(笑)
分けるのは良いと思います(*^_^*)

プロフィール

「@ふとし.さん おはようございます。
いよいよ、明日ですね〜♪( ´θ`)ノ」
何シテル?   02/16 08:06
TMJS60ULと申します。 HNの由来はお気に入りのバス釣り用のロッドの品番です。 最初、車の事を質問する為に、何気に名前付けて登録したのが始まりです。 ...

ハイタッチ!drive

みんカラ新規会員登録

ユーザー内検索

リンク・クリップ

おみくじブログ、おひとつ運試しにどうですか?(笑) 
カテゴリ:その他(カテゴリ未設定)
2017/12/14 22:46:57
 
ポップアップツール 
カテゴリ:その他(カテゴリ未設定)
2017/12/03 15:40:29
 
地図表示ツール 
カテゴリ:その他(カテゴリ未設定)
2017/07/30 09:47:56
 

お友達

ヴォクシー、プリウス乗りの方、モータースポーツ好きの方、阪神ファンの方、バス釣りされる方、それ以外の方も絡んでくれる方はポチっと宜しくお願いします。

総合的に見て絡めないと判断した場合はお誘いをお断りする場合もあります。
登録後も絡みのない方など整理させて頂く事もありますが、ご了承下さい。
53 人のお友達がいます
シンボリルドルフシンボリルドルフ * アギト777アギト777 *
アイリスアイリス * ちかいとちかいと *
R.ブラウンR.ブラウン * burtonburton *

ファン

65 人のファンがいます

愛車一覧

トヨタ ヴォクシー トヨタ ヴォクシー
お気に入りの愛車です。 プリウス購入後は、お出かけはプリウスが多くなりましたが、やはり最 ...
トヨタ プリウス トヨタ プリウス
一応、嫁車ですが、メンテ関係の管理は自分がします。 ヴォクシーと同じ様に大事にしたいです ...
ホンダ CRM250R ホンダ CRM250R
林道・エンデューロレース・モトクロスに使用 最後には保安部品すべて外して、ハイエースで運 ...
ホンダ ステップワゴンスパーダ ホンダ ステップワゴンスパーダ
一番最初のスパーダ、発売後すぐにディーラーへ、値引き交渉(だいぶ値切りました)してる間に ...
ヘルプ利用規約サイトマップ
©2018 Carview Corporation All Rights Reserved.