【CSS】iphoneで、cssのrotateYが動かない

html css プログラミング

解決策

CSSでrotateYを指定して、iphone以外では想定通りに動くのに、iphoneでのみ想定通りに動かないという現象が起きた場合、以下の指定を親要素にするとiphoneでも動かすことが出来ます。

-webkit-perspective: 600px;
perspective: 600px;

理由

これは、親要素に奥行きを設定する必要があるためです。

perspectiveは対象の要素からのz軸方向の視点の距離を表します。
値が大きい程、視点が離れます。そのため600pxというのは適当な値なので、600ではなくても大丈夫です。

コメント

タイトルとURLをコピーしました