0

重複の可能性:
translate vs transform-origin css3

この回転機能がどのように機能するかを理解しようとして立ち往生しています。

私は a と呼ぶ div を持っていrotate()ますtranslate()。次に、画像にカーソルを合わせると、もう 1 つ実行しますrotate()。2回目の回転では、基準点や回転するものを見つけることができないようです.

コードは非常に単純ですが、本当に困惑しています。

div {
  height: 361px;
  width: 361px;
  background: rgba(119, 0, 36, 0.5);
  opacity: 1;
  -webkit-transition: all .3s ease-in-out 0.6s;
  -moz-transition: all 0.3s ease-in-out 0.6s;
}
div#div2 {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-transform: rotate(56.5deg) translateX(-180px);
  -moz-transform: rotate(56.5deg) translateX(-180px);
}
div#div2:hover {
  -webkit-transform: rotate(56.5deg);
  -moz-transform: rotate(56.5deg);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
</head>

<body>
  <div>Hello. This is a DIV element.</div>
  <div id="div2">Hello. This is a DIV element.</div>
</body>

</html>

基本的に、灰色のブロックは回転し、平行移動します。カーソルを合わせると、別のrotate()が呼び出されます。しかし、それはどのように直線で回転していますか?! それはクレイジーです！ホバー内の値を変更しましたrotate()が、それでも意味がありません。

明確で徹底したヘルプをいただければ幸いです。

4

1 に答える 1

2

rotate(angle)は angle に angle を追加しませんが、要素をangleに回転します。したがって、「:hover」css では、次のように指定する必要があります。

rotate(156.5deg);

翻訳する代わりに、css でtransform-originプロパティを使用できます。

これがあなたが達成したいことであることを願っています: http://jsfiddle.net/diode/QGE7F/9/

于 2011-12-25T04:55:31.450 に答える