transform：rotate（-90deg）在iPhone上不工作

我有我創建的這個動畫圖形，但由於某種原因，路徑的開始處於90deg，所以我放置了一個轉換：rotate（-90deg）on它從0deg開始。這在我的桌面Chrome和Safari中運行良好，但是當我在iPhone上查看它時，它似乎忽略了我的旋轉並返回到默認的90度起點。我試過了一堆前綴，沒有任何改變。transform：rotate（-90deg）在iPhone上不工作

Here's the link on CodePen

body { 
 
    background-color: #34495e; 
 
} 
 

 
.skills-graph { 
 
\t fill: transparent; 
 
    transform: rotate(-90deg); 
 
\t -webkit-transform: rotate(-90deg); 
 
\t -ms-transform: rotate(-90deg); 
 
\t -moz-transform: rotate(-90deg); 
 
\t -o-transform: rotate(-90deg); 
 
\t position: absolute; 
 
\t top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    margin: auto; 
 
} 
 

 

 
#javascript { 
 
\t visibility: visible; 
 
    stroke: #ecf0f1; 
 
    animation-name: javascript; 
 
\t animation-duration: 1s; 
 
\t animation-timing-function: ease; 
 
\t animation-delay: 0s; 
 
\t animation-iteration-count: 1; 
 
\t animation-direction: normal; 
 
    stroke-dasharray: 880; 
 
    stroke-dashoffset: 780; 
 
\t animation-fill-mode: forwards; 
 
} 
 

 
@keyframes javascript { 
 
    0% { 
 
    stroke-dashoffset: 880; 
 
    stroke: white; 
 
    } 
 
    50% { 
 
    stroke: #ecf0f1; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 780; 
 
\t \t stroke: #ecf0f1; 
 
    } 
 
} 
 

 
#html { 
 
\t visibility: visible; 
 
\t fill: transparent; 
 
    stroke: #95a5a6; 
 
    animation-name: html; 
 
\t animation-duration: 1s; 
 
\t animation-timing-function: ease; 
 
\t animation-delay: 0s; 
 
\t animation-iteration-count: 1; 
 
\t animation-direction: normal; 
 
    stroke-dasharray: 691; 
 
    stroke-dashoffset: 271; 
 
\t animation-fill-mode: forwards; 
 
} 
 

 
@keyframes html { 
 
    0% { 
 
    stroke-dashoffset: 691; 
 
    stroke: white; 
 
    } 
 
    50% { 
 
    stroke: #95a5a6; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 271; 
 
\t \t stroke: #95a5a6; 
 
    } 
 
} 
 

 
#css { 
 
\t visibility: visible; 
 
\t fill: transparent; 
 
    stroke: #3dd0ac; 
 
    animation-name: css; 
 
\t animation-duration: 1s; 
 
\t animation-timing-function: ease; 
 
\t animation-delay: 0s; 
 
\t animation-iteration-count: 1; 
 
\t animation-direction: normal; 
 
    stroke-dasharray: 502; 
 
    stroke-dashoffset: 172; 
 
\t animation-fill-mode: forwards; 
 
} 
 

 
@keyframes css { 
 
    0% { 
 
    stroke-dashoffset: 502; 
 
    stroke: white; 
 
    } 
 
    50% { 
 
    stroke: #3dd0ac; 
 
    } 
 
    100% { 
 
    stroke-dashoffset: 172; 
 
    stroke: #3dd0ac; 
 
    } 
 
}

<div id="skills-graph"> 
 
      <!-- JavaScript Graph --> 
 
      <svg id="javascript" class="skills-graph" width="300" height="300"> 
 
      <circle cx="150" cy="150" r="140" stroke-width="20"/> 
 
      </svg> 
 
      <!-- HTML Graph --> 
 
      <svg id="html" class="skills-graph" width="300" height="300"> 
 
      <circle cx="150" cy="150" r="110" stroke-width="20"/> 
 
      </svg> 
 
      <!-- CSS Graph --> 
 
      <svg id="css" class="skills-graph" width="300" height="300"> 
 
      <circle cx="150" cy="150" r="80" stroke-width="20"/> 
 
      </svg> 
 
     </div>

來源

2016-11-18 Sean

我試着檢查你的問題，但在我的iPhone上，一切都和在codepen片段中一樣。你有哪個版本的iphone？ –

我想你可以在這裏找到答案：http://stackoverflow.com/questions/27303339/transform-not-working-on-ios –

@NatDavydova - 我正在使用iPhone 5c。我似乎可以將它旋轉到除-90deg之外的任何角度。我甚至嘗試了270deg的全速旋轉，但同樣的問題。還嘗試在關鍵幀中放置'transform：rotate'，但仍然無效。 – Sean

我沒有答案，但我打我的iPhone 6S與codepen一點點片斷（Safari瀏覽器），當我改變了「-webkit -transform：旋轉（-90deg）;「（in .skills-graph）爲「-webkit-transform：rotate（170deg）;」它改變方向。也許你現在可以自己找出答案。（我對代碼不太好）。祝你好運！編輯：「-webkit-transform：rotate（-89deg）;」這似乎是正確的。

來源

2016-11-18 10:24:59

transform：rotate（-90deg）在iPhone上不工作

回答

相關問題