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

回答

相关问题