Funcția CSS skewX()
Dă-i funcției skewX() un unghi, iar elementul se înclină de-a lungul axei X cu acea valoare.
Exemplu
Aici, un unghi de 20 de grade înclină elementul <div> pe orizontală, de-a lungul axei X.
Prompt
Creați o pagină care afișează un element div înclinat cu 20 de grade de-a lungul axei X folosind funcția de transformare CSS
skewX(). Includeți atât un div normal, cât și div-ul înclinat pentru comparație.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skewX()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skewX(20deg);
}
</style>
</head>
<body>
<h2>CSS skewX() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skewX 20deg):</p>
<div class="skewed">This div is skewed 20 degrees along the X-axis</div>
</body>
</html>
Funcția CSS skewY()
skewY() face același lucru pe cealaltă axă: elementul se înclină de-a lungul axei Y cu unghiul pe care îl transmiți.
Exemplu
De data aceasta pe axa Y, elementul <div> de mai jos se înclină cu 20 de grade.
Prompt
Creați o pagină care afișează un element div înclinat cu 20 de grade de-a lungul axei Y folosind funcția de transformare CSS
skewY(). Includeți atât un div normal, cât și div-ul înclinat pentru comparație.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skewY()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skewY(20deg);
}
</style>
</head>
<body>
<h2>CSS skewY() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skewY 20deg):</p>
<div class="skewed">This div is skewed 20 degrees along the Y-axis</div>
</body>
</html>
Funcția CSS skew()
Ca să înclini un element pe ambele axe dintr-un singur apel, transmite-i funcției skew() un unghi pentru X și un unghi pentru Y.
Dacă omiți al doilea parametru, acesta este considerat zero, așa că elementul se înclină doar pe axa X.
Înclinare pe ambele axe
Aici, elementul <div> primește două unghiuri: 20 de grade pentru axa X și 10 grade pentru axa Y.
Prompt
Creați o pagină care afișează un element div înclinat cu 20 de grade de-a lungul axei X și 10 grade de-a lungul axei Y folosind funcția de transformare CSS
skew(). Includeți atât un div normal, cât și div-ul înclinat pentru comparație.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skew()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<h2>CSS skew() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skew 20deg, 10deg):</p>
<div class="skewed">This div is skewed 20 degrees along the X-axis and 10 degrees along the Y-axis</div>
</body>
</html>
Înclinare cu un singur parametru
Cu un singur parametru, de 20 de grade, elementul <div> se înclină doar de-a lungul axei X.
Prompt
Creați o pagină care afișează un element div înclinat cu 20 de grade de-a lungul axei X folosind funcția CSS
skew() cu un singur parametru. Includeți atât un div normal, cât și div-ul înclinat pentru comparație.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS skew() with one parameter</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.skewed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: skew(20deg);
}
</style>
</head>
<body>
<h2>CSS skew() Function - One Parameter</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Skewed div (skew 20deg):</p>
<div class="skewed">This div is skewed 20 degrees along the X-axis</div>
</body>
</html>
Funcția CSS matrix()
matrix() reunește toate funcțiile de transformare 2D într-un singur apel.
matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()) arată cei șase parametri ai săi, în ordine.
Astfel, o singură declarație poate să rotească, să scaleze, să mute (translate) și să încline un element.
Exemplu
Prompt
Creați o pagină care afișează un element div transformat folosind funcția CSS
matrix() cu valorile matrix(1, -0.3, 0, 1, 0, 0). Includeți atât un div normal, cât și div-ul transformat pentru comparație.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS matrix()</title>
<style>
div.normal {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
}
div.transformed {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
margin: 40px;
transform: matrix(1, -0.3, 0, 1, 0, 0);
}
</style>
</head>
<body>
<h2>CSS matrix() Function</h2>
<p>Normal div:</p>
<div class="normal">This is a normal div</div>
<p>Transformed div (matrix):</p>
<div class="transformed">This div is transformed using the matrix() function</div>
</body>
</html>