55

css3変換の回転遷移に関するChromeの問題が発生しています。トランジションは正常に機能していますが、トランジションが終了した直後に、要素がピクセル単位でシフトします。もう1つの奇妙なことは、ページが中央に配置されている場合にのみ発生することです（margin:0 auto;）。トランジションも削除しても、バグはまだ残っています。

あなたはそれがここで起こっているのを見ることができます：

http://jsfiddle.net/MfUMd/1/

HTML：

<div class="wrap">
    <img src="https://github.com/favicon.ico" class="target" alt="img"/>
</div>

<div class="wrap">
    <div class="block"></div>
</div>

CSS：

.wrap {
    margin:50px auto;
    width: 100px;
}
.block {
    width:30px;
    height:30px;
    background:black;
}
.target,.block {
    display:block;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.target:hover,.block:hover {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

行をコメントアウトして、削除しmargin:0 auto;ます。

ページを中央に保ちながらこれを止める方法について誰かが何か考えを持っていますか？

OSX10.6.8でバージョン24.0.1312.57を使用しています

乾杯

4

3 に答える 3

107

実際には、これをすべての要素を保持するサイトコンテナに追加するだけです。 -webkit-backface-visibility: hidden;

修正する必要があります！

ジーノ

于 2013-03-25T20:15:48.820 に答える
22

私は同じ問題を抱えていました、私はトランジションを使用しているdivのcssに以下を追加することによってそれを修正しました：

-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0) scale(1.0, 1.0);

Backfaceは3Dベースのトランジションに使用されますが、2Dのみを使用している場合は、余分なものは必要ありません。

于 2014-04-07T09:27:09.007 に答える
0

ボディの寸法とトランスフォームの構造の関係には、何か変わったものがあります。実際には、コードのプレビューが含まれているフィドルiframeが原因ではありません。

とにかく、代わりにこのアプローチを提案します：

body{
  width:100%;
  float:left;
}

.wrap {
  margin: 50px 45%;
  width: 5%;
  float: left;
}
.block {
  width:30px;
  height:30px;
  background:black;
}
.target,.block {
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.target:hover,.block:hover {
-webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);  
}

これが更新されたフィドルです

于 2013-02-06T15:59:09.137 に答える