仅使用CSS从中心旋转三角形图像？

我正在尝试使用CSS从中心旋转一个三角形图像

我可以旋转图像，但它不是从中间旋转

这就是我到目前为止所做的：

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#装载{
动画：旋转2s无限线性；
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（359度）；
}
}

---

它是一个等边三角形，因此中心不是图像的中心，您应该像这样调整变换原点

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#装载{
动画：旋转2s无限线性；
变换原点：计算（100%/2）计算（100%*2/3）；
/*变换原点：50%66.666%*/
}
@关键帧旋转{
从{
变换：旋转（0度）；
}
到{
变换：旋转（359度）；
}
}

---

要获得三角形的中心：

（90158/3）

然后，将（158/3）减去158，从顶部而不是底部获得Y坐标

---

正文{
背景：#20262E；
填充：20px；
字体系列：Helvetica；
}
#装载{
变换原点：90px 105.3px；
动画：旋转2s无限线性；
}
@-webkit关键帧旋转{
从{
-webkit变换：旋转（0度）；
}
到{
-webkit变换：旋转（359度）；
}
}

---

@JamesJuanjie准确地说是2/3*100:）更准确地说是2/3*158；）IE10、IE11和边<14不支持在变换中使用calc（）。我知道，我用calc来显示计算结果，然后你可以很容易地用66.666%来改变它；）。。我没有在transform中使用它，而是在transform origin中使用它