变换：旋转（-90 度）在 iPhone 上不起作用答案

【问题标题】：transform: rotate(-90deg) not working on iPhone变换：旋转（-90 度）在 iPhone 上不起作用
【发布时间】：2023-04-05 05:46:01
【问题描述】：

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

Here's the link on CodePen

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

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

【问题讨论】：

我已经尝试检查您的问题，但在我的 iPhone 上，一切都与 codepen sn-p 中的完全相同。你的iphone是哪个版本的？
我想你可以在这里找到答案：stackoverflow.com/questions/27303339/…
@NatDavydova - 我正在使用 iPhone 5c。我似乎可以将它旋转到任何角度，除了-90度。我什至尝试了270度来完全旋转，但同样的问题。还尝试将“变换：旋转”放在关键帧中，但仍然不起作用。
@LizzyL - 我尝试了所有的前缀......没有运气。我也能够让它与 -89deg 一起工作，但我宁愿它是一个完美的 -90deg。 :)
对不起，不会是缓存的问题吗？因为我尝试在 5 和 6 iphone（以及使用 browserstack 的其他型号）上检查它，但在任何设备上都没有这样的问题

标签： css animation rotation transform css-transforms

【解决方案1】：

我没有答案，但我在 iPhone 6s (safari) 上玩了一点 codepen sn-p，当我更改了“-webkit-transform: rotate(-90deg);”时（在 .skills-graph 中）到“-webkit-transform: rotate(170deg);”它改变方向。也许您现在可以自己找到答案。（我对代码不是很好）。祝你好运！

编辑：使用“-webkit-transform: rotate(-89deg);”看起来是对的。

【讨论】：