2

私は CSS でテストしており、transform:rotateが機能しない奇妙な動作に到達しました。アニメーションが発生しない例を次に示します: jsFiddle

CSS

.close {
    width:100px;
    height:100px;
    background:#00f;
    color:#fff;

    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
.close:hover {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    transform: rotate(-180deg);
}
.close, .close:hover {
    -webkit-transition:rotate .2s ease-in-out;
    -moz-transition:rotate .2s ease-in-out;
    -o-transition:rotate .2s ease-in-out;
    -ms-transition:rotate .2s ease-in-out;
    transition:rotate .2s ease-in-out;
}

なぜこれが機能しないのですか？

ありがとう ;）

4

1 に答える 1

1

遷移を間違った属性に適用しました: ( Working jsFiddle )

.close { /* You don't really need .close:hover here */
    -webkit-transition: -webkit-transform .2s ease-in-out;
       -moz-transition:    -moz-transform .2s ease-in-out;
         -o-transition:      -o-transform .2s ease-in-out;
        -ms-transition:     -ms-transform .2s ease-in-out;
            transition:         transform .2s ease-in-out;
}

アニメートしたい属性はtransform. rotate()CSS プロパティではなく、変換関数です。

于 2013-09-02T23:55:43.923 に答える