I have a div which is already rotated, however all content within it is transformed in the same fashion.
I have plugged a fiddle below to better illustrate what I am trying to achieve.
What would be the proper way to transform the image of the 'moon' so that it maintains it's original shape as it travels the path?
很简单：让月亮反方向旋转！
#moon { width:150px; animation:RotateRev 15s linear infinite;}
@keyframes RotateRev
{from {transform:rotate(360deg);}
to {transform:rotate(0deg);}}
（另外，我可以理解它是否只是示例或其他东西，但您应该使用标准规范并具有前缀后备）
转换图像的正确方法是应用您已应用于所有元素的相反变换。
在您的情况下，这包括路径中的 rotateX 和 rotateY 以及动画中的旋转。
为此，您还需要指定 -webkit-transform-style: preserve-3d; 这样转换可以真正撤消以前的转换。
但是有一个问题，我认为这是一个 Chrome 错误：当您应用关键帧动画时，preserve-3d 停止工作。
所以，很抱歉，我无法让它工作；我认为如果不纠正这个错误是不可能的。可能在另一个浏览器中？
您可以在没有动画的情况下检查静态正确的小提琴正确的小提琴
您还可以看到反向关键帧动画，您需要让它工作。
我建议您创建在平面上缩放圆的椭圆，而不是在 3D 中旋转它，我相信您可以通过这种方式进行操作
CSS 的结尾是这样的：
#Path{margin:5% 15% auto; position:relative;
height:500px;width:500px;
background-color:rgba(0,200,200, .1);
border:1px solid black;
border-radius:300px;
-webkit-transform:perspective(0px) rotateX(50deg) rotateY(25deg);
-webkit-transform-style: preserve-3d;}
#moonContain {width:500px;height:500px;position:absolute; margin-left:-0.5%;
-webkit-transform-style: preserve-3d;
}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-transform:perspective(0px) rotateX(-50deg) rotateY(-25deg); }
@-webkit-keyframes Rotate
{from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}}
@-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg);}
to {-webkit-transform:rotate(0deg);}}
更正
我错误地解释了当您在月球本身中设置动画时出现的问题；我认为这是 Chrome 中的一个错误。真正发生的是动画正在为变换属性设置动画，并且撤消了月亮本身中指定的变换属性。正确答案：
在动画中设置两个变换，即使后者是恒定的：
@-webkit-keyframes counterRotate
{from {-webkit-transform:rotate(360deg) rotateX(-50deg) rotateY(-25deg);}
to {-webkit-transform:rotate(0deg) rotateX(-50deg) rotateY(-25deg);}}
#moon { width:150px;-webkit-transform-style: preserve-3d;
-webkit-animation:counterRotate 15s linear infinite;}