0

このページ（ディスクメニュー）でdivを360度回転させる簡単なCSSトランジションを作成しましたが、FirefoxNightlyでのみ機能しているようです。Firefox 15（リリースビルド）とGoogleChromeでも試してみました。どちらも画像を少し左に移動するだけで、上にあるテキストの周りにいくつかのグラフィカルなアーティファクトが表示されます。これはディスクに関連するCSSです（回転する画像は実際には実際のメニューdiv内に設定されたサイズの空のdivです）：

#menuDisco {
    transition: all 0.8s;
    -webkit-transform: rotate(0deg);  
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    background: url("img/disco.png");
    background-size: 100% 100%;
    position: relative;
    top: 0%; left: 0%;
    width: 100%; height: 100%;
    color: rgba(0,0,0,0);
}
#menu:hover #menuDisco {
    transition: all 0.8s;
    -webkit-transform: rotate(360deg);  
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
4

1 に答える 1

0

必ずすべてのプレフィックスを含めてください。 トランジションはFF16とOpera12.5では接頭辞が付いていません。（-ms-transitionは、IE9がサポートしておらず、IE10のプレフィックスがないため、役に立ちません）。

-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;

また、2番目のスタイル宣言は最初のスタイル宣言と同じであるため、遷移ルール​​は必要ありません。

于 2012-09-30T16:10:12.050 に答える