transform: rotate (-90deg) не работает на iPhone

Question

У меня есть этот анимированный график, который я создал, но начало пути по какой-то причине было на 90 градусов, поэтому я поставил преобразование: rotate (-90deg) on он начнется с 0deg. Это отлично работает на моем рабочем столе в Chrome и Safari, но когда я просматриваю его на своем iPhone, он, кажется, игнорирует мой поворот и возвращается к исходной точке 90deg по умолчанию. Я попробовал кучу префиксов, и ничего не изменилось.

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>

Answer 1

У меня нет ответа, но я играл немного с codepen фрагмент кода на моем iPhone 6s (сафари), и когда я изменил «-webkit -трансформация: вращение (-90deg); (в .skills-graph) к «-webkit-transform: rotate (170deg)»; он меняет направление. Может быть, теперь вы сами можете узнать ответ. (я не так хорош с кодом). Удачи!

EDIT: с "-webkit-transform: rotate (-89deg);" это кажется правильным.