はじめに
transform : rotateY(90deg);などを用いて、スクロール時に要素を回転させたい。
そういう時に使える便利なtransformプロパティ。
そして、完成していざデプロイ！
しかし、iOS実機では動かない事態が起こってしまいました。
そこで、いくつかの落とし穴にハマったので記載していこうと思います。
奥行きを作らないといけなかった
<div class = "section">
<div class = "content"></div>
</div>
.section{
margin: 0 auto;
width: 100%;
}
.content{
position: fixed;
top: 200px;
right: 100px;
width: 50%;
height: 50%;
background-position: center center;
background-size: cover;
opacity: 0;
transition: all 0.2s ease 0s;
transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
}
.show .content{
opacity: 1;
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
開発段階では、上記コードで問題なく期待通りの動作します。
ただし、デプロイ後、iOSで確認した際には状況が変わります。
僕の場合は、transform : rotateY;で回転しないどころか、スクロール時、画面が縦に真っ二つに割れていましまします。
では、どうすればよいのか？
解決策は？
結論は、
親要素にperspectiveプロパティを追加する
.section{
margin: 0 auto;
width: 100%;
/*追加*/
-webkit-perspective: 500px;
perspective: 500px;
}
perspectiveとは、
「3D変形の奥行きの深さを指定するプロパティ」です。
iOSでは、回転軸の位置が定められなく思うように動作できませんでした。
そこで、perspectiveで3D変形用の軸を定めています。
ここまでで、解決する方もいらっしゃるでしょう。
しかし。
僕のように、transform : rotateY;をかけた要素に対して、position: fixed;を使っている場合。
今度は、実機では正常に動くが、開発時（それも、僕の場合はchromeの時にのみ）には思っている挙動はしてくれません。
なぜか？
'transform'プロパティに 'none'以外の値を指定すると、適用先の要素に新しいローカル座標系が確立されます。
Transform Rendering Model
要は、transformを使用することで3dでの判断になる為、固定位置が定まらないという事です。
じゃ、どうすれば？
・transformを外す
・html構造の親子関係を解消させる
仕様上の問題なので、上記のパターンで変更を加えましょう。
参考
・iOS8 Safariで-webkit-transform: rotateX/rorateYが効かない/要素が消える
・[CSS] transform:perspectiveを使用した、パタッと開いて閉じるサイドメニュー
・position:fixedによる画面位置固定が出来ない、そんなときもあるよね。