ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSで画像上でマウスをスライドさせて回転させる方法
CSSで画像上でマウスをスライドさせて回転させる方法
- WBOYオリジナル
- 2021-11-12 14:24:145488ブラウズ
CSS では、「:hover」疑似クラス セレクターとtransform 属性を使用して、マウスが画像の上をスライドしたときに画像を回転させる効果を実現できます。構文は「picture element:hover{transform:」です。回転Z (回転角度);}" 。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS でマウスを使用して画像を回転する方法
CSS では、transform 属性を使用して div 要素を回転できます。属性は要素に 2D または 2D を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。
表内の数字は、この属性を完全にサポートする最初のブラウザのバージョンを示します。
-webkit-、-moz-、または -ms- が付いた番号は、接頭辞を使用した最初のバージョンを示します。
マウスをスライドさせて画像がどのように回転するかを例として見てみましょう。例は次のとおりです:
<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- プレフィックスを付けて使用します。
出力結果:
マウスをスライドさせると回転が発生します:
Updateプログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 ！
以上がCSSで画像上でマウスをスライドさせて回転させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。