ホームページ >ウェブフロントエンド >CSSチュートリアル >css3でマウスを置くことで画像を拡大するにはどうすればよいですか? (コード付き)
css3でマウスを置くことで画像を拡大するにはどうすればよいですか? (コード付き)
- 不言オリジナル
- 2018-10-10 14:10:4713735ブラウズ
css3 の学習では、小さなアニメーション効果を作成することがよくありますが、これは非常に興味深いものです。今日の記事では、画像の増幅を実現するための css3 の効果を紹介します。興味のある方はぜひご覧ください。
CSS3 では、要素の 2D または 3D 変換に適用されるtransform 属性が追加され、要素を回転、拡大縮小、移動、または傾けることができることは誰もが知っています。したがって、css3 で画像の拡大を実現するには、transform 属性が必要です。css3 で、transform 属性を使用して画像の拡大を実現する効果を見てみましょう。
最初のタイプ: css3 は、画像上にマウスを置くと画像が拡大され、余分な部分は隠されないという効果を実現します:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
width: 300px;
height: 300px;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.2);
-ms-transform: scale(1.2);
}
</style>
</head>
<body>
<div class="enlarge">
<img src="images/tu.jpg" alt="图片"/>
</div>
</body>
</html>css3 画像上にマウスを置くと画像が拡大される効果の前後の比較は以下のとおりです。 画像を拡大し、隠れた部分を非表示にする効果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.enlarge{
width: 300px;
height: 300px;
overflow: hidden;
border: 1px #ffffff solid;
}
.enlarge img{
width: 100%;
height: 100%;
cursor: pointer;
transition: all 0.6s;
-ms-transition: all 0.8s;
}
.enlarge img:hover{
transform: scale(1.3);
-ms-transform: scale(1.3);
}
</style>
</head>
<body>
<div class="enlarge">
<img src="images/tu.jpg" alt="图片"/>
</div>
</body>
</html> 
css3 画像上にマウスを置いて拡大する前後の効果は次のとおりです。 
##注: を使用して画像を拡大する上記 2 つの状況については、 css3 では、マウスがホバーしているときの状態を表す :hover 疑似クラスが使用されており、画像上にマウスを置くと画像が拡大され、マウスを離すと画像が表示されます。元のサイズに戻ります。
上記はこの記事の全内容です。css3 のtransform属性の詳細な使用法については、css3 学習マニュアルを参照してください。
以上がcss3でマウスを置くことで画像を拡大するにはどうすればよいですか? (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。