css3 rotate（）の参照先はどこですか？

可能性の重複：
translate vs transform-origin css3 css3 rotate（）の参照先はどこですか？

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

私はrotate()とtranslate()と呼んでいるdivがあります。それから私がイメージの上を動くとき、私はもう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()の値を変更しましたが、それでも私には意味がありません。

徹底した徹底的なサポートが大変ありがとうございます。

出典

2011-12-25 Sasha

私はすでにここにあなたのためにこれに答え：これはあなたが達成したいものです

希望http://stackoverflow.com/questions/8627939/translate-vs-transform-origin-css3 – joshnh

使用します[変換-origin]（http://dev.w3.org/csswg/css3-2d-transforms/#transform-origin-property）、ルーク。 –

回転（角度）は回転に角度を付けるのではなく、要素をの角度に回転します。そうで「：ホバー」CSS、あなたは

rotate(156.5deg);

代わりの翻訳のように与える必要があり、あなたはCSSで変換-起源をプロパティを使用することができます。 http://jsfiddle.net/diode/QGE7F/9/

出典

2011-12-25 04:55:31 Diode

ありがとう！あなたが書いた行....「回転（角度）は回転に角度を付けるのではなく、要素を角度に回転させる」ということは、ありがとう！私はそれが最初の笑いの前の方法だと思った – Sasha

css3 rotate（）の参照先はどこですか？

答えて

関連する問題