web-dev-qa-db-ja.com

CSS3変換が回転し、Chrome

私はchrome css3 transform rotate transitionで問題を抱えています。遷移は正常に機能していますが、ピクセルの要素シフトが終了した直後です。他の奇妙なことはそれが起こるだけですページが中央に配置されたとき（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;行をコメントアウトして、行を消します。

ページを中央に保ちながらこれを止める方法についてのアイデアはありますか？

OSX 10.6.8でバージョン24.0.1312.57を使用しています

乾杯

google-chromecss3css-transitionscss-transforms
52
DonutReply

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

それを修正する必要があります！

ジーノ

102
Gino

私は同じ問題を抱えていたので、トランジションを使用しているdivのcssに次を追加して修正しました：

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

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

20
James

身体の寸法と変換の構造との関係に異常があります。実際のところ、コードのプレビューを含むフィドル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);  
}

更新された fiddle

0
wandarkaf