变换不工作在IOS上

所以我面临这个小问题在iOS上实现这个代码，因为我不熟悉iOS的工作原理。我有这个圈子，我在我的网站上使用它的工作完美的浏览器和Android设备，但是当涉及到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); }

谢谢..

来源

2014-12-04 Fahad Sohail

在您的问题中发布您的代码 – Turnip 2014-12-04 21:03:11

感谢您的帮助，但我自己解决了它。 – 2014-12-04 21:06:10

请不要通过在代码块中放入非代码来规避代码要求。 **将代码粘贴到问题的正文中**，并提供一个链接，以帮助您解决问题。 – esqew 2014-12-04 21:07:20

发现问题，这是一个愚蠢的。我没有使用支持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); 
}

来源

2014-12-04 21:04:51

仅供参考最好的做法是最后放置非前缀版本。例如，如果不是，Chrome即使不再需要，也会使用“-webkit”版本。由于前缀在属性仍处于实验状态时使用，因此最终版本和前缀版本可能会提供不同的结果。 – Turnip 2014-12-04 21:20:33

@uʍopǝpısdn是否需要添加'-moz-'和'-o-'？他们分别为Firefox和Opera吗？ – IcyFlame 2015-05-18 06:31:26

iOS safari仍然需要浏览器的前缀transform

重复所有的变换和前

例

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

添加一个前缀 -webkit-版本

Working demo

来源

2014-12-04 21:05:45 Turnip

谢谢你帮助队友.. – 2014-12-04 21:10:28

你也打败了我:)你应该在你允许的时候标记你的答案为正确 – Turnip 2014-12-04 21:14:40

是的，我会的，谢谢.. – 2014-12-04 21:16:03

这里的另一个可能的问题（当iOS似乎忽略了一个转换）是一些版本的iOS中的错误，其中90度的精确倍数的旋转被忽略。

对我而言，解决方案是使用89.9度的变换（89.9度如预期工作; 90度完全不产生旋转）。不理想，但在我的情况下，差异不明显。

来源

2016-12-05 16:49:28

变换不工作在IOS上

回答

相关问题