CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのscale（）関数

CSSのscale（）関数は、2D平面上の要素のサイズを変更する変換を定義するために使用されます。 scale（）関数のパラメーターとして、各方向のスケーリング量を設定します。

例

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
   transform: translate(100px, 10%);
}
.scale_img {
   transform: scale(1.2);
   background-color: yellow;
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
<img class="scale_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
</body>
</html>

出力

CSSのscale（）関数

例

別の例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
.translate_img {
   transform: translate(100px, 10%);
}
.scale_img {
   transform: scale(0.3);
}
</style>
</head>
<body>
<h1>Learn</h1>
<img class="translate_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
<img class="scale_img" src=
"https://www.tutorialspoint.com/videotutorials/assets/videos/courses/509/images/course_509_image.png"
alt="MongoDB">
</body>
</html>

出力

CSSのscale（）関数


  1. CSSのmatrix（）関数

    CSSのmatrix（）関数は、同種の2D変換行列を定義するために使用されます。線形変換をパラメータとして設定します。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> .demo {    transform: matrix(2, 1, -1, 1, 190, 100); } .skew_img {    transform-origin: top right;    transform: skew(-0.10turn, 30deg

  2. CSS translate（）関数

    CSSのtranslate（）関数は、要素を水平方向と垂直方向に再配置するために使用されます。 例 例を見てみましょう- <!DOCTYPE html> <html> <head> <style> #demo1 {background-color: hsla(140, 100%, 50%, 0.8);} #demo2 {background-color: hsla(130, 100%, 50%, 0.6);} .translate_img {    transform: translate(50px, 0); } </