Question

http://ask-it.jp/index.php?qa=740&qa_1=transform-translate-%E3%82%92%E9%81%A9%E5%BF%9C%E3%81%97%E3%81%9F%E6%89%80ie10-11%E3%81%A0%E3%81%91%E3%81%AA%E3%81%AA%E3%82%81%E4%B8%8A%E3%81%AB%E3%81%90%E3%82%8B%E3%81%A3%E3%81%A8%E5%9B%9E%E3%82%8B%E3%82%A2%E3%83%8B%E3%83%A1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%82%92%E8%B5%B7%E3%81%93%E3%81%97%E3%81%BE%E3%81%99&show=755#c755

上記の続きです。回答済みになってしまっているので再質問しました。
ご存じなかたお願いします。

Answer 1

同じ質問をされるのは多少まずいと思いますが

<style>
div {
    transition-duration: 1s;
    transition-property: all;
}

div:hover {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);    
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
</style>
<div>
<img src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300">
</div>

IE9はそもそもrotateYには対応が不完全だと思います。上記コードでIE11では正しく同じ動きをしましたので、ご指定のDIVのサイズの指定が正しいかどうかや、他のアニメーションが重なってDIVに適応されていないかも調べられる事をお勧めします

https://jsfiddle.net/863y86tt/

Comments

正しい回答が来なかったので再質問したということです。
理由がわかりました。

スクロールすると、下からふわっと上がりながら要素が出てくるようにしていました。

・CSS
transform : translateがそのために二つ付いていました。
下記に再現をしておきました。
https://jsfiddle.net/863y86tt/4/
これを外すと問題なく回るようになりました。


ただ問題は下からふわっと出すアニメーションとホバー時クルット回るアニメーションを同居させて問題なく横にだけ回るようにする方法がわかりません。

下記要素の要素がそのように動くのですが、jsfiddle.netで再現できていません。
<img class="top-gnavi__link-fifth js-fadein-from-bottom rotate-180deg scrollin" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300">

少し考えてみますが、もし二つの動きをうまく同居させる方法があれば教えてください。