IOS上转换不起作用

Question

所以我在iOS上实现这段代码时遇到了一些小问题，因为我不熟悉iOS的工作方式。我在我的网站上使用了这个圆形，在浏览器和安卓设备上都完美运行，但是当涉及到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); }

谢谢。。

- Fahad Sohail

---

请在您的问题中发布您的代码。 - Turnip

谢谢你的帮助，但我已经自己解决了。 - Fahad Sohail

请勿通过在代码块中放置非代码来规避代码要求。请将代码粘贴到您的问题正文中，并提供链接（如果有必要）。 - esqew

好的，刚刚完成了。感谢指出。 - Fahad Sohail

Answer 1

iOS Safari 仍需要在 transform 属性前添加浏览器前缀。

复制所有的 transform 属性并在前面加上 -webkit- 前缀。

示例：

.deg0 { 
    -webkit-transform: translate(5.2em);
    transform: translate(5.2em);
}

演示

- Turnip

Answer 2

找到了问题，原来是一个愚蠢的错误。我没有使用被支持的-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);
}

- Fahad Sohail

---

FYI，最佳实践是将非前缀版本放在最后。如果不这样做，例如，即使不再需要，Chrome 也会使用 -webkit- 版本。由于前缀是在属性仍处于实验阶段时使用的，因此最终版本和带前缀的版本可能会提供不同的结果。 - Turnip

@uʍopǝpısdn 添加“-moz-”和“-o-”是必要的吗？它们分别用于火狐浏览器和欧朋浏览器吗？ - IcyFlame

Answer 3

在这里可能存在另一个问题（当iOS似乎忽略变换时），就是某些版本的iOS中存在的一个bug，即旋转角度恰好为90度的旋转会被忽略。

对我有效的解决方案是使用89.9度的变换代替90度（89.9度会按预期工作；90度则完全不旋转）。虽然不是最理想的解决方案，但在我的情况下并没有明显的差异。

- Nick F