2

1 つの画像と 4 つの異なる div があります。ホバーされている div に応じて、その画像をさまざまな角度で回転させようとしています。これまでのところ、画像の上にカーソルを置いて回転させることしかできませんでした。親子関係はありません。私がやろうとしていることは達成可能ですか？

HTML

<div id="line">
<img src="images/Line2.png" id="liner" alt="settings" />
</div>
<div id="d1">
</div>
<div id="2">
</div>

CSS

#d1:hover + #liner {
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
-o-transition-duration: 0.8s;
transition-duration: 0.8s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
overflow:hidden;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg) ;
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);

}

4

1 に答える 1

1

最も健全な解決策は、javascript でこれを行うことです。ただし、これを純粋に CSS3 で行いたい場合は可能です。私がまとめたこの JSFiddle をチェックしてください。

http://jsfiddle.net/4NQfj/

トリックは、div をネストし、最後にイメージを最も深いレベルでネストすることです。たとえば、次のようになります。

<div id="d1">
    <div id="d2">
        <div id="d3">
            <img id="couldBeAnImage" src="...">
        </div>
    </div>
</div>

次に、各 div の :hover で画像をスコープすることで、画像の変換プロパティを簡単に調整できます。したがって、フィドルのコードを短くするために、私は基本的にこれを行っています:

#d1:hover #couldBeAnImage { transform: rotate(15deg); }
#d2:hover #couldBeAnImage { transform: rotate(30deg); }
#d3:hover #couldBeAnImage { transform: rotate(45deg); }

JavaScript を使用する理由は、このトリックが機能するように各 div のサイズと位置を調整する必要があるためです。それは問題ではありませんが、次のことができると仮定するのは常に現実的ではないという事実を除いて: a.) 与えられたレイアウトでこれを行い、.. b.) 各 div と後続の画像の位置がすべて各祖先に相対的であるという事実に対処します。 div。

そのため、少しトリッキーになりますが、これはあなたが説明した問題に対する 100% CSS ソリューションです。私が自分でそう言わなければ、解決するのはかなり楽しいです:)

編集：

もちろん、JavaScriptでもこれを行うことができます。これは、少し「ずさんな」ソリューションを示すフィドルです。

http://jsfiddle.net/k3t2U/1/

これを行う方法は、mouseover および mouseout イベントを div に追加することです。この場合、div は互いに完全に独立している可能性があります。

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="couldBeAnImage"></div>

この例では、jQuery の .hover() メソッドを使用してイベント ハンドラーを追加しました。ホバーは基本的にこれを行いましょう： .hover(functionToCallOnMouseOver(), functionToCallOnMouseOut())

だから私はまだ CSS で回転を処理しています。回転のさまざまなレベルを表す 3 つのクラスがあります。次に、mouseOver および mouseOut イベント ハンドラーで、さまざまな回転量を指定するクラスを追加または削除します。

$("#d1").hover(function(){
    $("#couldBeAnImage").addClass("rotate");
},function(){
    $("#couldBeAnImage").removeClass("rotate");
});

JavaScript では、これをさまざまな方法で行うことができます。したがって、これはほんの一例です。実際の要素をより自由に制御できるという意味で、より強力です。CSS メソッドは基本的に「トリック」であり、マークアップとスタイルを指定する方法は非常に限られています。一般に、javascript を使用してこの問題を解決することをお勧めします。

于 2012-11-08T04:05:08.643 に答える