人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

css3の質問です。
transformで画像を傾け向けたいのですが、hoverした際に動い欲しいんです。
cssで a:hover{}で指定しても動かないです。

なにか方法はないでしょうか?
ちなみに画像は背景ではなくHTMLへの埋め込みです。

●質問者: snoopy_japan
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● Cherenkov
●50ポイント

moz-、-webkit-のベンダープレフィックスが抜けてるとか。
動作確認しているブラウザが対応していないとか。
こちらにhoverとtransformを組み合わせたデモがあります。確認してみてください。

css3のtransitionプロパティでアニメーションサンプルをいろいろ作ってみた - かちびと.net


snoopy_japanさんのコメント
すみません、moz-、-webkit-のベンダープレフィックスは書いています、 動作確認は最新のChromeなんで問題ないかと思います。 ちなみに、hoverとからまさなければ傾くは傾くです、

Cherenkovさんのコメント
コードを提示したほうが早いかと

snoopy_japanさんのコメント
#postion #envelope{ position:absolute; top:500px; left:-150px; z-index:2; } #postion #envelope a:hover{ transform: rotate(5deg); -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); -o-transform: rotate(5deg); margin-left:-2px; margin-bottm:-1px; z-index:2; } こんな感じでした、すみません。

質問者から

追記です。
moz-、-webkit-のベンダープレフィックスは書いています、
動作確認は最新のChromeです。


2 ● kyabana
●200ポイント ベストアンサー

aタグをdisplay:blockなどでブロック要素とすることでtransformが効きそうですが、いかがですか?下記で試したところ、動きました。

<!DOCTYPE html>
<html lang="ja">
 <head>
 <meta charset="utf-8">
 <style type="text/css">
 <!-- 
 .box a {
 display: block;
 background: #CCCCCC;
 padding: 40px;
 }
 .box a:hover {
 transform: rotate(5deg);
 -webkit-transform: rotate(5deg);
 -moz-transform: rotate(5deg);
 -o-transform: rotate(5deg);
 transform-origin: left middle;
 -moz-transform-origin: left top;
 -webkit-transform-origin: left top;
 -o-transform-origin: left top;
 }
 -->
 </style>
 </head>
 <body>
 <div class="box"><a href="/">box</a></div>
 </body>
</html>

snoopy_japanさんのコメント
ありがとうございます、ブッロク要素にすろという発想はなかったです、ありがとうございます。 いつもありがとうございます。
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ