「C#」transformプロパティのscale関数で要素を拡大縮小させる
書式
transform: scale(横の倍数, 縦の倍数);
scale関数を利用して要素を拡大縮小させます。
使用例
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<!--scale関数で横を1.2倍,縦を0.8倍にする -->
<style>
.trans {
transform: scale(1.2, 0.8);
border: 1px solid #000;
background-color: skyblue;
width: 250px;
height: 60px;
}
.cft {
border: 1px dotted #000;
background-color: yellow;
width: 250px;
height: 60px;
}
</style>
<body>
<div class="cft">
<div class="trans">要素を拡大縮小させる</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<!--scale関数で横を1.2倍,縦を0.8倍にする -->
<style>
.trans {
transform: scale(1.2, 0.8);
border: 1px solid #000;
background-color: skyblue;
width: 250px;
height: 60px;
}
.cft {
border: 1px dotted #000;
background-color: yellow;
width: 250px;
height: 60px;
}
</style>
<body>
<div class="cft">
<div class="trans">要素を拡大縮小させる</div>
</div>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <!--scale関数で横を1.2倍,縦を0.8倍にする --> <style> .trans { transform: scale(1.2, 0.8); border: 1px solid #000; background-color: skyblue; width: 250px; height: 60px; } .cft { border: 1px dotted #000; background-color: yellow; width: 250px; height: 60px; } </style> <body> <div class="cft"> <div class="trans">要素を拡大縮小させる</div> </div> </body> </html>
実行結果
div要素「trans」の内容はscale関数で横を1.2倍,縦を0.8倍にしています。