<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>私の場合はこの1行(値は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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.