子どもの未知の量のCSS3プログレッシブ変換

私は、トランジションと組み合わせたCSSでプログレッシブ変換を行ってきました。それはこれまでかなりうまく見えましたが、私はそれをどのようにして一般的なものにすることができるか、つまりどんな量の子供にも分かりやすくしたいと思います。子どもの未知の量のCSS3プログレッシブ変換

ダブレット/要点はhereです。これは、少量の子供向けにハードコードされていることをすぐに確認できます。私は以下のようにdiv+div+div+div....のルールを書く必要はありません - これを達成するためのきちんとした方法はありますが、どんなアイデアも歓迎します。

.fan:hover div { 
    -webkit-transform: rotate(10deg); 
    top: -10px; 
    left: 5px; 
    box-shadow: 0 2px 10px rgba(128,128,128,0.3); 
} 
.fan:hover div+div { 
    -webkit-transform: rotate(20deg); 
    top: -15px; 
    left: 10px; 
} 
.fan:hover div+div+div { 
    -webkit-transform: rotate(30deg); 
    top: -20px; 
    left: 15px; 
}

編集：私は、彼らがあまりにも今のためだけのWebKitルールです実現;）

出典

2012-05-02 dmp

私はおそらく動的にするためにJSを使用するだろうが、純粋なCSSで可能かどうかは面白いだろう。 –

正確に - JSでは、それは自明ですが、これがcssでできるかどうかを知ってうれしいです。 – dmp

最初は、（http://css-tricks.com/numbering-in-style/）[CSS]（http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/）を使って、 [Counter]（https://developer.mozilla.org/ja/CSS_Counters）ですが、CSSで生成されたコンテンツに対してのみ機能します。（ '：before'と'：after'） '：nth-child（...）'を使うだけでなく、CSSを使ってこの（確かに便利な）効果を達成する方法は考えられませんが、複数の宣言が必要なのを避ける。 – Nightfirecat

あなたのコードでチラッ：秒、修正ファンのために

http://dabblet.com/gist/2574800

、のみ.fan:hover divルールが適用されますが、ネストすることにより、変換ルールはdivに複数回適用されるため、最初のdivは10deg、2番目の10 + 10degなどは回転します。ルールをさらに調整したり、しかし原則は明らかだと私は思う。

出典

2012-05-02 07:28:59 Christoph

うまく動作 - 私は構造が好きではないが、それと一緒に暮らすことができます:) – dmp

子どもの未知の量のCSS3プログレッシブ変換

答えて

関連する問題