CSSで画像上でマウスをスライドさせて回転させる方法-CSSチュートリアル-php.cn

CSSで画像上でマウスをスライドさせて回転させる方法

WBOY

リリース： 2021-11-12 14:24:14

オリジナル

5477 人が閲覧しました

CSS では、「:hover」疑似クラスセレクターとtransform 属性を使用して、マウスが画像の上をスライドしたときに画像を回転させる効果を実現できます。構文は「picture element:hover{transform:」です。回転Z (回転角度);}" 。

CSSで画像上でマウスをスライドさせて回転させる方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS でマウスを使用して画像を回転する方法

CSS では、transform 属性を使用して div 要素を回転できます。属性は要素に 2D または 2D を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。

表内の数字は、この属性を完全にサポートする最初のブラウザのバージョンを示します。

-webkit-、-moz-、または -ms- が付いた番号は、接頭辞を使用した最初のバージョンを示します。

CSSで画像上でマウスをスライドさせて回転させる方法

マウスをスライドさせて画像がどのように回転するかを例として見てみましょう。例は次のとおりです:

<html>
<head> 
<style>
body {
background:#ddd;
}
.keleyi {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("1013.01.png") left top;
-webkit-background-size: 220px 220px;
background-size: 220px 220px;
-webkit-border-radius: 110px;
border-radius: 110px;
-webkit-transition: -webkit-transform 2s ease-out;
}
.keleyi:hover {
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
</style>
</head>
<body>
<div class="keleyi"></div>
 
</body>
</html>

ログイン後にコピー

上記の例では、 Chrome ブラウザを使用するため、-webkit- プレフィックスを付けて使用します。

出力結果:

CSSで画像上でマウスをスライドさせて回転させる方法