<input type="checkbox" id="toggle-checkbox">

  <label for="toggle-checkbox" id="checkarea">
   <span id="toggle"><span></span></span>
   <span class="toggle_sub_txt"></span>
</label>
<label for="toggle-checkbox" id="drawer-cover"></label>

<nav id="main_navi_menu">
 <ul>
  <li><a href="#">Menu 1</a></li>
  <li><a href="#">Menu 2</a></li>
  <li><a href="#">Menu 3</a></li>
 </ul>
</nav>

<main>
 <h2>iPhone でのtransform（rotate）対応</h2>
 <h3>iPhone の「Safari」「Chrome」でCSS「transform（特にrotate）」の指定が動かない場合の対応方法。</h3>
 <p>不具合の原因としては「transform: ...」をした親要素に奥行きが指定されていないことが一つらしい。</p>
 <p>対応としては、とりあえず「transform」を指定した要素の<u>親要素</u>に「-webkit-perspective」プロパティを追記してみる。<br><small>（CSS：24行目参照）</small></p>
 <p>私の場合はこの１行（値は500px） の追加で解決した。</p>
</main>
*, *::before, *::after {
 margin: 0; padding: 0;
 box-sizing: border-box;
 -webkit-transition: -webkit-transform 0.5s;
 transition: 0.5s;
}
/* #checkarea */
#checkarea {
 position: fixed;
 width: auto; max-width: 68px;
 height: auto; max-height: 68px;
 margin-top: 10px; padding: 12px; padding-bottom: 8px;
 background-color: rgba(255, 255, 255, 0.6);
 border: 1px solid #555;
 font-size: 1rem;
 text-align: center;
 display: block;
 cursor: pointer;
 box-sizing: content-box;
}
/* #toggle */
#checkarea #toggle {
 position: relative;
 -webkit-perspective: 500px;
 margin: 0;
 width: 40px; height: 34px;
 display: block;
}
#toggle span,
#toggle::before,
#toggle::after {
 position: absolute; left: 50%; top: 50%;
 width: 100%;
 -webkit-transform: translate(-50%, 0) rotate(0deg);
 transform: translate(-50%, 0) rotate(0deg);
 font-size: 0; line-height: 0;
 border-bottom: 2px solid rgba(0, 0, 0, 0.8);
 display: block; opacity: 1;
}
#checkarea #toggle::before,
#checkarea #toggle::after {
 margin: 0; content: "";
}
#checkarea #toggle::before {
 -webkit-transform: translate(-50%, -15px) rotate(0deg);
 transform: translate(-50%, -15px) rotate(0deg);
}
#checkarea #toggle::after {
 -webkit-transform: translate(-50%, 15px) rotate(0deg);
 transform: translate(-50%, 15px) rotate(0deg);
}
#checkarea .toggle_sub_txt {
 margin-top: 0.5em; line-height: 1em; display: block;
}
#checkarea .toggle_sub_txt::before {
 content: "MENU";
 font-size: 8px; color: #555;
}
/* toggle checked */
#toggle-checkbox { display: none; }
#toggle-checkbox:checked ~ label #toggle span {
 opacity: 0;
}
#toggle-checkbox:checked ~ label #toggle::before {
 -webkit-transform: translate(-50%, 0) rotate(135deg);
 transform: translate(-50%, 0) rotate(135deg);
 border-color: rgba(255,255,255,0.8);
}
#toggle-checkbox:checked ~ label #toggle::after {
 -webkit-transform: translate(-50%, 0) rotate(-135deg);
 transform: translate(-50%, 0) rotate(-135deg);
 border-color: rgba(255,255,255,0.8);
}
#toggle-checkbox:checked ~ label .toggle_sub_txt::before {
 content: "CLOSE";
 color: rgba(255,255,255,0.8);
}
#toggle-checkbox:checked ~ #checkarea {
 background-color: rgba(0, 0, 0, 0.5);
 border-color: rgba(255,255,255,0.8);
}
/* others */
#main_navi_menu {
 position: fixed;
 width: 100%; max-width: 300px;
 height: 100vh; max-height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 transform: scaleX(0) translateX(0px); opacity: 0;
}
#main_navi_menu ul {
 padding: 1em;
 padding-top: 100px;
 list-style: none;
}
#main_navi_menu ul,
#main_navi_menu ul a { color: #FFF;
 text-decoration: none;
 outline: none;
}
#drawer-cover {
 position: fixed;
 width: 100%; height: 100vh;
 background-color: rgba(0, 0, 0, 0.3);
 transform: scaleX(0) translateX(-100%); opacity: 0;
 cursor: pointer;
}
#toggle-checkbox:checked ~ #main_navi_menu {
 transform: scaleX(1) translateX(0px); opacity: 1;
}
#toggle-checkbox:checked ~ #drawer-cover {
 transform: scaleX(1) translateX(0px);
 opacity: 1; display: block;
}
#checkarea { z-index: 3; }
#main_navi_menu { z-index: 2; }
#drawer-cover { z-index: 1; }
main { padding-top: 100px; }
h2,h3,p { margin-bottom: 1em;}
@media only screen and (min-width: 640px) {
 #toggle-checkbox:checked ~ main {
  padding-left:320px;
 }
}
@media only screen and (min-width: 1280px) {
 main {
  margin: 0 auto;
  max-width: 960px;
 }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.