web-dev-qa-db-ja.com

スムーズな回転遷移CSS3？

ホバーしたときに画像を回転させており、遷移をスムーズにしたいので、これを試しました。

<div class="latest-thumbs">
    <img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
    <img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
    <img src="images/thumbs/thumb01.jpg" alt="thumb" class="rotate" />
</div><!-- end latest-thumbs -->

CSS：

.rotate {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);

    -webkit-transform-Origin: 50% 50%;
    -moz-transform-Origin: 50% 50%;
    -ms-transform-Origin: 50% 50%;
    -o-transform-Origin: 50% 50%;
    transform-Origin: 50% 50%;

    -webkit-transition: 300ms ease all;
    -moz-transition: 300ms ease all;
    -o-transition: 300ms ease all;
    transition: 300ms ease all;
}

.rotate:hover {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

    -webkit-transform-Origin: 50% 50%;
    -moz-transform-Origin: 50% 50%;
    -ms-transform-Origin: 50% 50%;
    -o-transform-Origin: 50% 50%;
    transform-Origin: 50% 50%;
}

私の画像はホバーすると回転するので、問題はありませんが、遷移がスムーズではありません。これを修正する方法についてのアイデアはありますか？

JSFiddle： http://jsfiddle.net/wntX4/

htmlcsscss3transitionsmooth
6
2339870

すべての遷移cssプロパティを変更します（easyをlinearに置き換えます）

transition: 300ms ease all;

と

transition: 300ms linear all;

参照 this

更新

トランジションは、正しい方法で機能している不透明度プロパティのみを対象としています

15
faby

私はあなたのフィドルでこれを変更しました、そしてそれは機能します：

.rotate:hover {
            transform: rotate(0deg) translate(50%);
            -moz-transform: rotate(0deg) translate(50%);
            -webkit-transform: rotate(0deg) translate(50%);
            -o-transform: rotate(0deg) translate(50%);
            -ms-transform: rotate(0deg) translate(50%);
            -khtml-transform: rotate(0deg) translate(50%);
            transition: all 2s ease;
            -moz-transition: all 2s ease;
            -webkit-transition: all 2s ease;
            -o-transition: all 2s ease;
            -ms-transition: all 2s ease;
            -khtml-transition: all 2s ease;
        }

ブラウザが一度に2つのホバーを起動していたと思います。 1歳ですが、また失敗するかもしれません。

0
DusanV

transform: translate（そしてもちろんブラウザ固有のプレフィックス）を使用してみてください。 この記事 はかなり役に立ちます。

0
Dykotomee