CSS 转换在 IOS 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27303339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Transform not Working on IOS
提问by Fahad Sohail
So I am facing this little problem implement this code on iOS because I am not familiar how iOS works. I have this circle which I am using on my website and its working perfect on browsers and android devices but when it comes to iOS it breaks down and all of the degree's come to center. I'll be glad if someone could help me out on this one ..
所以我面临这个在 iOS 上实现这段代码的小问题，因为我不熟悉 iOS 的工作原理。我有这个圈子，我在我的网站上使用它，它在浏览器和安卓设备上运行完美，但是当谈到 iOS 时，它崩溃了，所有的学位都集中在了中心。如果有人能帮我解决这个问题，我会很高兴..
The HTML
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>
The CSS:
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); }
Thanks ..
谢谢 ..
采纳答案by Fahad Sohail
Found the problem, it was a silly one. I didn't use -webkit which is supported for iOS. Below is the solved JS Fiddleif anyone needs it ..
发现问题了，是个傻逼。我没有使用支持iOS. 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);
}
回答by Turnip
iOS safaristill requires browser prefixes for transform
iOS safari仍然需要浏览器前缀 transform
Duplicate all of your transforms and add a -webkit-prefixed version before
复制所有转换并-webkit-在之前添加前缀版本
Example
例子
.deg0 {
-webkit-transform: translate(5.2em);
transform: translate(5.2em);
}
回答by Nick F
Another possible issue here (when iOS seems to be ignoring a transform) is a bug in some versions of iOS where rotations that are an exact multiple of 90 degrees are ignored.
这里另一个可能的问题（当 iOS 似乎忽略了一个转换时）是某些版本的 iOS 中的一个错误，其中忽略了 90 度的精确倍数的旋转。
The solution that worked for me was to use a transform of 89.9 degrees instead (89.9 degrees worked as expected; 90 degrees produced no rotation at all). Not ideal, but in my case the difference wasn't noticeable.
对我有用的解决方案是使用 89.9 度的变换（89.9 度按预期工作；90 度根本不产生旋转）。不理想，但就我而言，差异并不明显。
