變換不工作在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上

回答

相關問題