1

すでに回転している div がありますが、その中のすべてのコンテンツは同じ方法で変換されます。

私が達成しようとしていることをよりよく説明するために、以下にフィドルを接続しました。

「月」のイメージを変換して、パスを移動するときに元の形を維持する適切な方法は何でしょうか?

4

2 に答える 2

0

画像を変換する適切な方法は、すべての要素に適用した反対の変換を適用することです。

あなたの場合、パスには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;}

正しいデモ

于 2013-03-30T20:57:07.380 に答える
0

簡単：月を反対方向に回転させよう！

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

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

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

（また、それが単なる例か何かかは理解できますが、標準仕様を使用し、プレフィックスフォールバックを使用する必要があります）

于 2013-03-30T21:04:16.293 に答える