CSSで右から左に画像を回転

JavaScriptを使わずに純粋なCSSでDIVの画像を右から左に回転することはできますか？CSSで右から左に画像を回転

2011-01-10 user160820

CSS3のtransform: rotate(...)や独自のIEフィルタを使用すると可能です。 an exampleまたはthe specificationを参照してください。

position:absolute; 
-moz-transform: rotate(90deg); 
-webkit-transform: rotate(90deg); 
-o-transform: rotate(90deg); /*opera*/ 
transform: rotate(90deg); /*likely future standard*/ 
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
/*for filter: 1==90deg, 2==180deg, 3==270deg*/

この変換はレンダリング変換です。回転はレイアウトに影響しません（position: relativeの内容に似ています）。そのため、ここでは絶対配置が最も簡単な方法です。また、仕様が最終的なものではないことに注意してください。詳細が変わる可能性があります（特に、トランスフォームがレイアウトとどのように相互作用するのか - position:absolute;に固執する別の理由）。

最後に、アニメーショントランジションに興味があります。ランダムにグーグルの例としてhereを見ることができます。これらはまだファイナックス、ウェブキット、オペラに部分的に実装されていますが、標準化されていません。ノンストップアニメーションはAppleの提案で、これまでのところWebkitのみで実装されており、移行よりかなり複雑です。私は、標準が潜在的に複雑な方法でうまく変化する可能性があるので、技術デモを除いてこれらから離れています。

出典

2011-01-10 14:05:00

+1正解です。（あなたのコメントが間違っています：// CSSの有効なコメントではありません） – Spudley

whoops;構文は固定です - ありがとう！ –

彼は静的な回転を探しているかどうかは不明です。つまり、固定された角度で画面に表示されますか？例えば、要素が画面上で回転する場所。

スタティックローテーションの場合、@Eamon Nerbonneの答えは絶対に当てはまります。 transformとfilterスタイルがあなたの望むものです。（ただし、filterの構文は無効なCSSであり、テストではIE以外のブラウザでスタイルを無視する可能性があるため、注意が必要です）

あなたが探しているのはアニメーションの回転、それははるかに難しいです。 transitionとtransformのスタイルを使用してCSS仕様にアニメーションがサポートされていますが、現時点では非常にサポートされていません。 SafariとChromeはそれを実行できるはずですが、他のものとは闘うことになります。

次のリンクをクリックしてください。http://webkit.org/blog/138/css-animation/

出典

2011-01-10 14:21:50 Spudley

CSSで右から左に画像を回転

答えて

関連する問題