iOS8 Safariで-webkit-transform: rotateX/rorateYが効かない/要素が消える

iOS8でrotateXが動かない？？？

iPhoneの実機のみで -webkit-transform : rotateX(180deg) した要素が消える問題発生。
Chrome(Android)、Safari(OS X)、Chrome(Windows)、Firefox(Windows)では再現しない。。。
rotateにすると動くけれど、求めてる動きと違う。
rotate3D(1,0,0,180deg)も動かない。

”親要素に”CSS perspectiveを追加する

-webkit-perspective: 500px;
perspective: 500px;

奥行を設定してあげることで、想定通りに回転しました！！
回転する軸の位置がわからなくなっていたよう。
body直下をtranslateなどでいじり倒してるのでそれが原因っぽい。
シンプルなソースなら、iOS8実機でもrotateXがちゃんと動く。

参考

[Apple Support Communities] iOS8でCSS rotateY/rotateXの要素が見えなくなる。
[stackoverflow.com] Mobile SafariでCSS transform rotateXが動かない。rotateは動く。