Question

我创建了这个动画图，但由于某种原因，路径的起点为90deg，所以我在其上放置了一个变换：rotate（-90deg）从0deg开始。这在Chrome和Safari中的桌面上工作正常，但是当我在iPhone上查看时，它似乎忽略了我的旋转并返回到默认的90deg起点。我尝试过一堆前缀而没有任何变化。

Here's the link on CodePen

＆＃13;

body {
  background-color: #34495e;
}

.skills-graph {
	fill: transparent;
  transform: rotate(-90deg);
	-webkit-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	position: absolute;
	top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  margin: auto;
}


#javascript {
	visibility: visible;
  stroke: #ecf0f1;
  animation-name: javascript;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
  stroke-dasharray: 880;
  stroke-dashoffset: 780;
	animation-fill-mode: forwards;
}

@keyframes javascript {
  0% {
    stroke-dashoffset: 880;
    stroke: white;
  }
  50% {
    stroke: #ecf0f1;
  }
  100% {
    stroke-dashoffset: 780;
		stroke: #ecf0f1;
  }
}

#html {
	visibility: visible;
	fill: transparent;
  stroke: #95a5a6;
  animation-name: html;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
  stroke-dasharray: 691;
  stroke-dashoffset: 271;
	animation-fill-mode: forwards;
}

@keyframes html {
  0% {
    stroke-dashoffset: 691;
    stroke: white;
  }
  50% {
    stroke: #95a5a6;
  }
  100% {
    stroke-dashoffset: 271;
		stroke: #95a5a6;
  }
}

#css {
	visibility: visible;
	fill: transparent;
  stroke: #3dd0ac;
  animation-name: css;
	animation-duration: 1s;
	animation-timing-function: ease;
	animation-delay: 0s;
	animation-iteration-count: 1;
	animation-direction: normal;
  stroke-dasharray: 502;
  stroke-dashoffset: 172;
	animation-fill-mode: forwards;
}

@keyframes css {
  0% {
    stroke-dashoffset: 502;
    stroke: white;
  }
  50% {
    stroke: #3dd0ac;
  }
  100% {
    stroke-dashoffset: 172;
    stroke: #3dd0ac;
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

我没有答案，但是我在iPhone 6s（safari）上使用了codepen代码片段，当我更改了＆＃34; -webkit-transform：rotate（-90deg）;＆＃34时; （在.skills-graph中）到＆＃34; -webkit-transform：rotate（170deg）;＆＃34;它改变方向。也许你现在可以自己找到答案。（我对代码不太好）。祝你好运！

编辑：使用＆＃34; -webkit-transform：rotate（-89deg）;＆＃34;看来是对的。

transform：rotate（-90deg）无法在iPhone上运行

1 个答案: