CSS では、「:hover」疑似クラス セレクターとtransform 属性を使用して、マウス オーバー要素の反時計回りの回転効果を実現できます。構文は「element:hover{transform:rotateZ (rotation)」です。角度);}" 。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
css でマウス ホバー要素の反時計回りの回転効果を実現する方法
「:hover」疑似クラス セレクターとcss のtransform このプロパティは、マウスを画像上でロールしたときに反時計回りに回転する効果を実現します。変換プロパティは、要素に 2D または 3D 変換を適用します。このプロパティを使用すると、要素を回転、拡大縮小、移動、または傾けることができます。
例を見てみましょう。例は次のとおりです:
<html>
<head>
<style>
.keleyi {
width: 220px;
height: 220px;
margin: 0 auto;
background: no-repeat url("1118.02.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>出力結果:
(学習ビデオの共有: CSS ビデオ チュートリアル )
以上がCSSでマウスホバー要素に反時計回りの回転効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
CSSグリッドとは何ですか？Apr 30, 2025 pm 03:21 PMCSSグリッドは、複雑で応答性の高いWebレイアウトを作成するための強力なツールです。設計を簡素化し、アクセシビリティを向上させ、古い方法よりも多くの制御を提供します。
CSS Flexboxとは何ですか？Apr 30, 2025 pm 03:20 PM記事では、レスポンシブデザインにおけるスペースの効率的なアラインメントと分布のためのレイアウト方法であるCSS FlexBoxについて説明します。 FlexBoxの使用量を説明し、CSSグリッドと比較し、ブラウザのサポートを詳細に説明します。
CSSを使用してWebサイトを応答するにはどうすればよいですか？Apr 30, 2025 pm 03:19 PMこの記事では、ビューポートメタタグ、柔軟なグリッド、流体メディア、メディアクエリ、相対ユニットなど、CSSを使用してレスポンシブWebサイトを作成するための手法について説明します。また、CSSグリッドとフレックスボックスを使用してカバーし、CSSフレームワークを推奨しています
CSSボックスサイズのプロパティは何をしますか？Apr 30, 2025 pm 03:18 PMこの記事では、要素の寸法の計算方法を制御するCSSボックスサイズのプロパティについて説明します。コンテンツボックス、ボーダーボックス、パディングボックスなどの値と、レイアウト設計とフォームアライメントへの影響について説明します。
CSSを使用してアニメーション化するにはどうすればよいですか？Apr 30, 2025 pm 03:17 PM記事では、CSS、キープロパティ、およびJavaScriptとの組み合わせを使用してアニメーションの作成について説明します。主な問題は、ブラウザの互換性です。
CSSを使用してプロジェクトに3D変換を追加できますか？Apr 30, 2025 pm 03:16 PM記事では、3D変換、主要なプロパティ、ブラウザの互換性、およびWebプロジェクトのパフォーマンスに関する考慮事項にCSSを使用して説明します。
CSSに勾配を追加するにはどうすればよいですか？Apr 30, 2025 pm 03:15 PMこの記事では、CSSグラデーション（線形、放射状、繰り返し）を使用して、ウェブサイトのビジュアルを強化し、深さ、フォーカス、および現代の美学を追加します。
CSSの擬似要素とは何ですか？Apr 30, 2025 pm 03:14 PM記事では、CSSの擬似要素、HTMLスタイリングの強化における使用、および擬似クラスとの違いについて説明します。実用的な例を提供します。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
WebStorm Mac版
便利なJavaScript開発ツール
SublimeText3 英語版
推奨: Win バージョン、コードプロンプトをサポート!
EditPlus 中国語クラック版
サイズが小さく、構文の強調表示、コード プロンプト機能はサポートされていません
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
ホットトピック
7906
15165214141152130325124829