2

HTML

<div class="photos"> 
<img src="images/p1.jpg" />
<img src="images/p2.jpg" />
.............
</div>

CSS

.photos img:hover {
    -webkit-transform: rotate(360deg) scale(1.5);
    -moz-transform: rotate(360deg) scale(1.5);
    -o-transform: rotate(360deg) scale(1.5);
    transform: rotate(360deg) scale(1.5);
    z-index: 10;}

上記の CSS 回転プロパティがp1.jpgにのみ適用されるのはなぜですか?

4

4 に答える 4

1

CSSセレクターにカーソルを合わせているだけなので、カーソルp1.jpgを合わせている画像でのみ起動されます。

各画像を別々に回転させたくない場合は、これらの行を css に追加してください。

-webkit-transition: all 1.2s linear;
-moz-transition: all 1.2s linear;
-o-transition: all 1.2s linear;
-ms-transition: all 1.2s linear;
transition: all 1.2s linear;

残念ながら、あなたが求めていることを実現するには JavaScript が必要です。

于 2013-08-19T09:17:12.017 に答える
1

作品を回転させます。360 度の角度で画像を同じ位置に配置します。トランジションでトランスフォームを使用するか、角度の値を変更してください。

したがって、コードは次のようになります。

.photos img {
    -webkit-transition: -webkit-transform 1.2s linear;
    -moz-transition: -moz-transform 1.2s linear;
    -o-transition: -o-transform 1.2s linear;
    -ms-transition: -ms-transform 1.2s linear;
    transition: transform 1.2s linear;
    overflow:hidden;
}

.photos img:hover { 
    -webkit-transform: rotate(360deg) scale(1.5);
    -moz-transform: rotate(360deg) scale(1.5);
    -o-transform: rotate(360deg) scale(1.5);
    -ms-transform: rotate(360deg) scale(1.5);
    transform: rotate(360deg) scale(1.5);
    z-index: 10;
}
于 2013-08-19T09:27:03.257 に答える