iPhone でtransform(rotate)が動かない件

iPhone でtransform(rotate)が動かない件

iPhone実機(Safari, Chrome)で、CSS「transform(特にrotate)」を指定した要素が正常に動かない場合の対応方法です。

【原因】

「transform: …」をした要素の親要素奥行きが指定されていないことが原因の一つらしい。

【対処】

「transform」を指定した要素の親要素に「-webkit-perspective」プロパティで奥行きを追記する
参考

上記サンプルでは「-webkit-perspective: 500px;」(CSS・24行目)の1行を親要素「#toggle」に追加することで解決しました。

「transform」プロパティの値にはZ軸や3Dの指定もあるので、iPhoneでは「transform」が指定された要素を厳密な3D空間として扱うのでしょうね。

javascript 別窓で開く

リンク先のページを別窓で開く javascript コードです。