ホームページ > 記事 > ウェブフロントエンド > CSS を使用して画像を回転し、マウスを画像上に移動したときにさまざまな効果を表示するにはどうすればよいですか?
CSS を使用して画像を回転し、マウスを画像上に移動したときにさまざまな効果を表示するにはどうすればよいですか?
- 藏色散人オリジナル
- 2018-08-09 17:44:594237ブラウズ
ウェブを閲覧するときに、マウスを特定の画像の上にスライドさせると、画像が動的に変化します。この効果は常に斬新で目を引きます。では、このような優れた効果はどのようにして実現されるのでしょうか?これは強力な css3 機能と切り離せないものです。 CSS3 画像を回転できるだけでなく、CSS 回転増幅、CSS 回転 90 度、CSS 画像回転 45 度などの特殊効果も実現できます。
そこで、この記事では、マウスを画像上でスライドさせたときに画像が回転した後に表示されるさまざまな特殊効果を紹介します。
具体的なコード例は次のとおりです:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css旋转效果测试</title>
<style type="text/css">
div{
width:120px;
height:120px;
line-height:120px;
margin: 20px;
background-color: #5cb85c;
float: left;
font-size: 12px;
text-align: center;
color:#000;
}
/*效果一：90°旋转 修改rotate(旋转度数)*/
.img1 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img1:hover {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
}
/*效果二：放大 修改scale(放大的值)*/
.img2 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img2:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
}
/*效果三：旋转放大 修改rotate(旋转度数) scale(放大值)*/
.img3 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img3:hover {
transform: rotate(360deg) scale(1.2);
-webkit-transform: rotate(360deg) scale(1.2);
-moz-transform: rotate(360deg) scale(1.2);
-o-transform: rotate(360deg) scale(1.2);
-ms-transform: rotate(360deg) scale(1.2);
}
/*效果四：上下左右移动 修改translate(x轴,y轴)*/
.img4 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img4:hover {
transform: translate(0, -10px);
-webkit-transform: translate(0, -10px);
-moz-transform: translate(0, -10px);
-o-transform: translate(0, -10px);
-ms-transform: translate(0, -10px);
}
/*效果五：360°旋转 修改rotate(旋转度数)*/
.img5 {
transition: All 0.4s ease-in-out;
-webkit-transition: All 0.4s ease-in-out;
-moz-transition: All 0.4s ease-in-out;
-o-transition: All 0.4s ease-in-out;
}
.img5:hover {
transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="img1">90度旋转 </div>
<div class="img2">放大</div>
<div class="img3">旋转放大</div>
<div class="img4">上下左右移动 </div>
<div class="img5">360度旋转 </div>
</body>
</html>効果は次のとおりです:
この CSS 回転アニメーションの紹介が、困っている友達に役立つことを願っています。
以上がCSS を使用して画像を回転し、マウスを画像上に移動したときにさまざまな効果を表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。