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

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件




 

入札多数の人気商品!

 

タグ

関連整備ピックアップ

水まわり工事開始

難易度: ★★★

洗面所は・・・

難易度:

2017.08.07 ワンオフ超ショートハンドル超音波洗浄

難易度:

キャンプグッズお気に入りの品々

難易度:

虫よけ&冷感スプレー

難易度:

ヘーイヘイヘイヘーイヘイ・その14

難易度: ★★

関連リンク

この記事へのコメント

2017/09/16 19:57:08

こんばんは😄😄😄✨。

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

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

現状、マウスオーバーで縦回転してますが、クリックで横回転できないか色々試しましたが、上手く行きませんね~(;^ω^)

プロフィール

「@ふとし. さん 南京町じゃないですか(#^.^#)ボクは中央広場にある老祥記の豚まんが好きです。でも長い事行ってない(;´・ω・)」
何シテル?   09/21 21:27
TMJS60ULと申します。 HNの由来はお気に入りのバス釣り用のロッドの品番です。 最初、車の事を質問する為に、何気に名前付けて登録したのが始まりです。 ...

ハイタッチ!drive

みんカラ新規会員登録

ユーザー内検索

リンク・クリップ

おみくじブログ(笑) 
カテゴリ:その他(カテゴリ未設定)
2017/07/30 09:48:14
地図表示ツール 
カテゴリ:その他(カテゴリ未設定)
2017/07/30 09:47:56
 
画像ランダム君 
カテゴリ:その他(カテゴリ未設定)
2016/03/01 23:26:08
 

お友達

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

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

ファン

61 人のファンがいます

愛車一覧

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

QRコード

QRコード
このブログを携帯でご覧になれます
ヘルプ利用規約サイトマップ
©2017 Carview Corporation All Rights Reserved.