Question

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

我已经插入了一个小提琴，以更好地说明我想要实现的目标。

改变“月亮”图像的正确方法是什么，以便在它沿着路径行进时保持原始形状？

Answer 1

转换图像的正确方法是应用已应用于所有元素的对位变换。

在您的情况下，包括路径中的rotateX和rotateY，以及动画中的旋转。

为了使其正常工作，您还需要指定-webkit-transform-style：preserve-3d;这样转换就可以真正撤消先前的转换。

但是有一个问题，我认为这是一个Chrome错误：当您应用关键帧动画时，preserve-3d会停止工作。

所以，很遗憾地说，我无法使其发挥作用;而且我认为如果这个错误没有得到纠正是不可能的。可能在另一个浏览器中？

你可以查看静态正确的小提琴correct fiddle without animation

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

我建议你创建在平面上缩放圆圈的椭圆，而不是在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;}

Correct demo

Answer 2

简单：让月球向相反方向旋转！

http://jsfiddle.net/hsntY/3/

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

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

（另外，我可以理解它是仅仅是例如什么，但你应该使用标准规范并且有前缀回退）

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

2 个答案:

Correct demo