是否可以对当前转换的div上的图像应用css转换

我有一个已经旋转的div，但是其中的所有内容都以相同的方式转换

我在下面插了一把小提琴，以便更好地说明我正在努力实现的目标

---

变换“月亮”图像的正确方法是什么，以便它在路径上移动时保持其原始形状？

变换图像的正确方法是应用已应用于所有元素的oposite变换

在本例中，这包括路径中的rotateX和rotateY，以及动画中的rotate

要使其正常工作，还需要指定-webkit transform style:preserve-3d；因此，转换可以真正撤消以前的转换

不过，有一个问题，我认为这是Chrome的一个bug：当应用关键帧动画时，preserve-3d停止工作

所以，很抱歉，我无法让它工作；我认为如果这个错误没有被纠正，这是不可能的。可能在其他浏览器中

你可以检查小提琴的静态是否正确

您还可以在那里看到反向关键帧动画，您需要使其工作

我建议您创建elipse，在平面中缩放圆，而不是在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中的一个bug。它真正发生的是，动画正在设置变换属性的动画，这将撤消在月球本身中指定的变换属性。 正确答案：

在动画中设置两个变换，即使后者是常量：

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

---

简单：让月亮朝相反的方向旋转

---

（另外，我可以理解它是否只是一个示例或什么，但您应该使用标准规范并具有前缀回退）

有人吗？帮个忙[

#moon { width:150px; animation:RotateRev 15s linear infinite;}

@keyframes RotateRev        
    {from {transform:rotate(360deg);}
     to   {transform:rotate(0deg);}}