Funcția CSS scale()
Dă-i funcției scale() două valori, prima pentru lățime și a doua pentru înălțime, iar elementul se mărește sau se micșorează în consecință.
Mărire
Aici, un element <div> ajunge de două ori mai lat și de trei ori mai înalt decât era la început.
Prompt
Creați o pagină HTML cu un element div care folosește CSS transform: scale(2, 3) pentru a-i mări dimensiunea de două ori mai lat și de trei ori mai înalt decât dimensiunile originale. Afișați div-ul cu puțin text în interior și o culoare de fundal astfel încât efectul de scalare să fie vizibil.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scale() - Increase</title>
<style>
div.scaled {
margin: 100px;
width: 100px;
height: 50px;
background-color: yellow;
border: 1px solid black;
transform: scale(2, 3);
}
</style>
</head>
<body>
<h1>The scale() Function</h1>
<p>The div element below is scaled to be two times its original width and three times its original height:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
Micșorare
Aici, ambele dimensiuni ale unui element <div> sunt reduse la jumătate din mărimea lor inițială.
Prompt
Creați o pagină HTML cu un element div care folosește CSS transform: scale(0.5, 0.5) pentru a-i micșora dimensiunea la jumătate din lățimea și înălțimea sa originală. Afișați div-ul cu puțin text în interior și o culoare de fundal astfel încât efectul de scalare să fie vizibil.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scale() - Decrease</title>
<style>
div.scaled {
margin: 50px;
width: 200px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scale(0.5, 0.5);
}
</style>
</head>
<body>
<h1>The scale() Function</h1>
<p>The div element below is scaled to be half of its original width and height:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
Funcția CSS scaleX()
Cu scaleX() se schimbă doar lățimea unui element, care poate fi mărită sau micșorată.
Mărire lățime
Un factor de 2 dublează lățimea inițială a acestui element <div>.
Prompt
Creați o pagină HTML cu un element div care folosește CSS transform: scaleX(2) pentru a-i mări lățimea de două ori mai mult decât lățimea originală. Afișați div-ul cu puțin text în interior și o culoare de fundal astfel încât efectul să fie vizibil.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scaleX() - Increase</title>
<style>
div.scaled {
margin: 50px;
width: 100px;
height: 50px;
background-color: yellow;
border: 1px solid black;
transform: scaleX(2);
}
</style>
</head>
<body>
<h1>The scaleX() Function</h1>
<p>The div element below is scaled to be two times its original width:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
Micșorare lățime
Un factor de 0.5 îngustează acest element <div> la jumătate din lățimea inițială.
Prompt
Creați o pagină HTML cu un element div care folosește CSS transform: scaleX(0.5) pentru a-i micșora lățimea la jumătate din lățimea sa originală. Afișați div-ul cu puțin text în interior și o culoare de fundal astfel încât efectul să fie vizibil.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scaleX() - Decrease</title>
<style>
div.scaled {
margin: 50px;
width: 200px;
height: 50px;
background-color: yellow;
border: 1px solid black;
transform: scaleX(0.5);
}
</style>
</head>
<body>
<h1>The scaleX() Function</h1>
<p>The div element below is scaled to be half of its original width:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
Funcția CSS scaleY()
Cu scaleY(), înălțimea este singura dimensiune care se schimbă, în sus sau în jos.
Mărire înălțime
Un factor de 3 face acest element <div> de trei ori mai înalt decât era la început.
Prompt
Creați o pagină HTML cu un element div care folosește CSS transform: scaleY(3) pentru a-i mări înălțimea de trei ori mai mult decât înălțimea originală. Afișați div-ul cu puțin text în interior și o culoare de fundal astfel încât efectul să fie vizibil.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scaleY() - Increase</title>
<style>
div.scaled {
margin: 100px;
width: 100px;
height: 50px;
background-color: yellow;
border: 1px solid black;
transform: scaleY(3);
}
</style>
</head>
<body>
<h1>The scaleY() Function</h1>
<p>The div element below is scaled to be three times its original height:</p>
<div class="scaled">Hello World!</div>
</body>
</html>
Micșorare înălțime
Un factor de 0.5 scurtează acest element <div> la jumătate din înălțimea inițială.
Prompt
Creați o pagină HTML cu un element div care folosește CSS transform: scaleY(0.5) pentru a-i micșora înălțimea la jumătate din înălțimea sa originală. Afișați div-ul cu puțin text în interior și o culoare de fundal astfel încât efectul să fie vizibil.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS scaleY() - Decrease</title>
<style>
div.scaled {
margin: 50px;
width: 100px;
height: 100px;
background-color: yellow;
border: 1px solid black;
transform: scaleY(0.5);
}
</style>
</head>
<body>
<h1>The scaleY() Function</h1>
<p>The div element below is scaled to be half of its original height:</p>
<div class="scaled">Hello World!</div>
</body>
</html>