Question

transform : translate(0, 5rem);を適応した所IE10,11だけななめ上にぐるっと回るアニメーションを起こします。

クローム、ファイヤーフォックスはそのようなアニメーションはしません。

IEのバグないしはIEだけ独自実装されているのでそうか？
この変なアニメーションをなくすには、削除するしかないでしょうか？

動いてくれませんが下記のようにしています。アイコンはマテリアルアイコンです。
https://jsfiddle.net/fj2h9w8g/2/


下記のようにoriginを真ん中にしてもIEだけ違う動きをします。
.rotate-180deg:hover {
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);/* IEだけ、動きが違う */
    -ms-transform-origin: center!important;
}

Answer 1

-webkit-transform: translate(0,5rem);
-moz-transform: translate(0,5rem);
-o-transform: translate(0,5rem);
-ms-transform: translate(0,5rem);
transform: translate(0,5rem);

上記のような順序で記載したら正しく動作しませんか？

Comments

下記のようにしましたが変わりません。

originの基準がIEだけ違うという話を聞きます、それを整える方法をだれか教えください。

/* Gnaviのみに適応したい場合 */
.rotate-180deg {
    transition-duration: 1s;
    transition-property: all;
}

.rotate-180deg:hover {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);    
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);/* IEだけ、動きが違う */
    transform: rotateY(180deg);
}
/* /Gnaviのみに適応したい場合 */

---

-ms-transform: rotate(180deg) ;の下に
-ms-transform-origin: 0 0;

のような記載をしてもだめでしょうか？

---

ありがとうございます。
確かに動きが変わりましたが、右側に大きくずれてもっとアクロバットなとんでもない動きをするよになりました。
100にしても50にしてもうまくいきません。

---

そうなんですね（笑）
-ms-transform-origin:50% 50%;
で中心になるかもしれません。お試しください

---

だめです変わりません。