CSS3で元の周りを回転するには？

以下に示すように、私は次の文字にABCを持っている：CSS3で元の周りを回転するには？

<body> 
<div id="container"> 
    <div id="shape" class="spin"> 
    <div id="A" class="plane">A</div> 
    <div id="B" class="plane">B</div>  
    <div id="C" class="plane">C</div> 
    </div> 
</div>

私が欲しいものは、そのx軸の周りに回転させるそれぞれの文字のですか？

Iは、（文字Cのために）しようとした：

#C { 
-webkit-animation: spinAboutItsCentre 8s linear; 
} 

@-webkit-keyframes spinAboutItsCentre { 
    from { 
     -webkit-transform: rotateX(0); 
    } 
    to { 

    -webkit-transform: rotateX(360deg); 
    } 
}

が、Cは、文字Aはそれにその軸を回転されている場所に上を移動する手紙。

アイデア？

出典

2011-08-10 JD.

'rotate'ではなくrotateXを使用してもよろしいですか？残りのコードでjsFiddleを作成できますか？ –

これは次のようになります。変換元のプロパティを指定する必要があります。 x-％、y-％、およびz-px。

文字の位置のエンジンの解釈は、オブジェクトの中心ではなく、オブジェクトの「始点」（側）から始まるため、Y軸を中心に回転すると少しのオフセットが生成されます。

0％と100％の指定は、「from」と「to」の句を表しています。この形式では、指定した時間枠に渡って動きを増やすことができるように、、50％は180°回転、75％は270°回転、100％は360°回転）。

@-webkit-keyframes spinX 
{ 
0% {-webkit-transform: rotateX(0deg); -webkit-transform-origin: 0% 50% 0;} 
100% {-webkit-transform: rotateX(360deg); -webkit-transform-origin: 0% 50% 0;} 
} 

@-webkit-keyframes spinY 
{ 
0% {-webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;} 
100% {-webkit-transform: rotateY(360deg); -webkit-transform-origin: 0% 0% 5;} 
}

これらのスタイルを試してみてください。正常に動作するはずです。

出典

2011-08-10 20:39:49 Chris

クリスおかげで、ちょうど私の頭の中にあなたのコードの周りを得ています。私は変換を行ったことに気づいた：#C {不透明度：0.5; -webkit-transform：translateX（400px）};これが問題を引き起こしたのかどうか疑問に思っていますか？このコードを残しておけば、まだ回転を適用できますか？ } –

あなたは-webkit-プレフィックスを使用していますので、IE、Firefox、Operaのプレフィックスは-ms-、-moz-、および - ですので、ChromeやSafariでCSSをテストしたと仮定しています。それぞれ（少なくとも現在は）;つまり、私はChromeとSafariの両方に投稿したメソッドを、不透明度0.5を宣言してテストしました。両方ともうまくいきました。あなたの問題は、ブラウザにどのように/どこで回転のための文字を固定するかを伝えることともっと関係しているようです。 CSS3のこの機能のデモがあります： http://www.w3schools.com/cssref/trycss3_transform-origin_3d_inuse.htm – Chris

こんにちはクリス、助けてくれてありがとう。 –

変換には、「変換元」が関連付けられています。変換元が指定されていない場合は、要素の（50％、50％）に自動的に設定されます。あなたの正確なコードがjsfiddleとして入力されると、意図したとおりに動作します。

私の推測では、完全なコードでは、変換元が間違って指定されているか、クラスのベースCSSに他の不自然さがあります。

アップデート：はい、あなたは基本CSSに奇妙なことがありました。デバッグには CSSとHTMLが必要です。

出典

2011-08-10 17:11:04

CSS3で元の周りを回転するには？

答えて

関連する問題