转换不工作在IOS
所以我面对这个小问题在iOS上实现这个代码，因为我不熟悉iOS的工作原理。 我有这个圈子，我在我的网站上使用，它的工作完美的浏览器和Android设备，但是当涉及到iOS它打破了，所有的学位来到中心。 如果有人能帮我解决这个问题，我会很高兴的。
HTML
<div class='circle-container'> <div class="center"> Center </div> <div class="deg90">1</div> <div class="deg315">2</div> <div class="deg0">3</div> <div class="deg110">4</div> <div class="deg135">5</div> <div class="deg180">6</div> <div class="deg225">7</div> </div> CSS：
.circle-container { position: relative; width: 15em; height: 14em; padding: 2.8em; /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/ border: dashed 0px; border-radius: 50%; } .circle-container > a { display: block; text-decoration: none; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; text-align: center; } .circle-container div { display: block; text-decoration: none; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; text-align: center; } .circle-container img { display: block; width: 100%; height:320px; position:absolute; margin-left:-25px; margin-top:15px;} .deg0 { transform: translate(5.2em); } /* 12em = half the width of the wrapper */ .deg45 { transform: rotate(45deg) translate(5.4em) rotate(-45deg); } .deg90 { transform: rotate(-90deg) translate(5em) rotate(90deg); } .deg110 { transform: rotate(45deg) translate(5em) rotate(-45deg); } .deg135 { transform: rotate(135deg) translate(5em) rotate(-135deg); } .deg180 { transform: translate(-5em); } .deg225 { transform: rotate(225deg) translate(5em) rotate(-225deg); } .deg315 { transform: rotate(315deg) translate(5em) rotate(-315deg); }
谢谢 ..
iOS safari仍然需要浏览器前缀进行transform
复制所有转换并添加-webkit-前缀版本
例
.deg0 { -webkit-transform: translate(5.2em); transform: translate(5.2em); }
工作演示
发现问题，这是一个愚蠢的。 我没有使用iOS支持的-webkit。 下面是解决的JS Fiddle如果任何人需要它..
.circle-container { position: relative; width: 15em; height: 14em; padding: 2.8em; /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/ border: dashed 0px; border-radius: 50%; } .circle-container > a { display: block; text-decoration: none; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; text-align: center; } .circle-container div { display: block; text-decoration: none; position: absolute; top: 50%; left: 50%; width: 4em; height: 4em; margin: -2em; text-align: center; } .circle-container img { display: block; width: 100%; height:320px; position:absolute; margin-left:-25px; margin-top:15px;} .deg0 { transform: translate(5.2em); -webkit-transform: translate(5.2em); -ms-transform: translate(5.2em); } /* 12em = half the width of the wrapper */ .deg45 { transform: rotate(45deg) translate(5.4em) rotate(-45deg); -webkit-transform: rotate(45deg) translate(5.4em) rotate(-45deg); -ms-transform: rotate(45deg) translate(5.4em) rotate(-45deg); } .deg90 { transform: rotate(-90deg) translate(5em) rotate(90deg); -webkit-transform: rotate(-90deg) translate(5em) rotate(90deg); -ms-transform: rotate(-90deg) translate(5em) rotate(90deg); } .deg110 { transform: rotate(45deg) translate(5em) rotate(-45deg); -webkit-transform: rotate(45deg) translate(5em) rotate(-45deg); -ms-transform: rotate(45deg) translate(5em) rotate(-45deg); } .deg135 { transform: rotate(135deg) translate(5em) rotate(-135deg); -webkit-transform: rotate(135deg) translate(5em) rotate(-135deg); -ms-transform: rotate(135deg) translate(5em) rotate(-135deg); } .deg180 { transform: translate(-5em); -webkit-transform: translate(-5em); -ms-transform: translate(-5em); } .deg225 { transform: rotate(225deg) translate(5em) rotate(-225deg); -webkit-transform: rotate(225deg) translate(5em) rotate(-225deg); -ms-transform: rotate(225deg) translate(5em) rotate(-225deg); } .deg315 { transform: rotate(315deg) translate(5em) rotate(-315deg); -webkit-transform: rotate(315deg) translate(5em) rotate(-315deg); -ms-transform: rotate(315deg) translate(5em) rotate(-315deg); }
这里另一个可能的问题（当iOS似乎忽略了一个转换）是一些iOS版本中的一个错误，其中90度的精确倍数的旋转被忽略。
对我而言，解决scheme是使用89.9度的变换（89.9度，按预期工作; 90度没有产生任何旋转）。 不理想，但在我的情况下，差异并不明显。