css3の質問です。

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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/09/26 00:21:33
  • 終了:2012/09/26 13:25:55

ベストアンサー

id:kyabana No.2

kyabana回答回数155ベストアンサー獲得回数432012/09/26 08:29:49

ポイント200pt

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>
id:snoopy_japan

ありがとうございます、ブッロク要素にすろという発想はなかったです、ありがとうございます。
いつもありがとうございます。

2012/09/26 13:25:31

その他の回答(1件)

id:Cherenkov No.1

Cherenkov回答回数1502ベストアンサー獲得回数4922012/09/26 01:27:07

ポイント50pt

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

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

他1件のコメントを見る
id:Cherenkov

コードを提示したほうが早いかと

2012/09/26 08:46:32
id: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;

}
こんな感じでした、すみません。

2012/09/26 13:25:22
id:snoopy_japan

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

id:kyabana No.2

kyabana回答回数155ベストアンサー獲得回数432012/09/26 08:29:49ここでベストアンサー

ポイント200pt

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>
id:snoopy_japan

ありがとうございます、ブッロク要素にすろという発想はなかったです、ありがとうございます。
いつもありがとうございます。

2012/09/26 13:25:31

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません