はじめに

transform : rotateY(90deg);などを用いて、スクロール時に要素を回転させたい。

そういう時に使える便利なtransformプロパティ。

そして、完成していざデプロイ！

しかし、iOS実機では動かない事態が起こってしまいました。

そこで、いくつかの落とし穴にハマったので記載していこうと思います。

奥行きを作らないといけなかった

sample.html

<div class = "section">
  <div class = "content"></div>
</div>

sample.css

.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プロパティを追加する

sample.css

.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による画面位置固定が出来ない、そんなときもあるよね。

・これはハマった！スマホサイトのコーディング時に悩んだバグと仕様4選【iOS8情報あり】

・position:fixedが効かない事件簿