所以我在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); }
谢谢..
答案 0 :(得分:51)
iOS safari
仍需要transform
复制所有转换并在
之前添加-webkit-
前缀版本
实施例
.deg0 {
-webkit-transform: translate(5.2em);
transform: translate(5.2em);
}
答案 1 :(得分:3)
这里的另一个可能的问题(当iOS似乎忽略转换时)是某些版本的iOS中的一个错误,其中旋转是90度的精确倍数。
对我有用的解决方案是使用89.9度的变换(89.9度按预期工作; 90度完全没有旋转)。不理想,但就我而言,差异并不明显。
答案 2 :(得分:2)
发现问题,这是一个愚蠢的问题。我没有使用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);
}