Transformări CSS 3D
Prin proprietatea transform, un element poate fi mutat, rotit, redimensionat sau înclinat, atât în 2D, cât și în 3D.
Funcțiile de transformare CSS 3D
Pentru transformările 3D, transform primește funcțiile de mai jos:
rotateX()rotateY()rotateZ()
Funcția CSS rotateX()
De rotirea în jurul axei X se ocupă rotateX(), care primește mărimea rotirii în grade.
Exemplu
Prompt
Creați o pagină cu un element div stilizat cu o culoare de fundal. Aplicați o transformare CSS 3D folosind rotateX(150deg) pentru a-l roti în jurul axei X.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotateX()</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotateX(150deg);
}
</style>
</head>
<body>
<h1>The rotateX() Function</h1>
<div id="myDiv">Hello</div>
</body>
</html>
Funcția CSS rotateY()
Dă-i lui rotateY() o valoare în grade, iar elementul se rotește cu atât în jurul axei sale Y.
Exemplu
Prompt
Creați o pagină cu un element div stilizat cu o culoare de fundal. Aplicați o transformare CSS 3D folosind rotateY(150deg) pentru a-l roti în jurul axei Y.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotateY()</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotateY(150deg);
}
</style>
</head>
<body>
<h1>The rotateY() Function</h1>
<div id="myDiv">Hello</div>
</body>
</html>
Funcția CSS rotateZ()
Cu rotateZ(), axa de rotație este axa Z a elementului, iar unghiul se dă tot în grade.
Exemplu
Prompt
Creați o pagină cu un element div stilizat cu o culoare de fundal. Aplicați o transformare CSS 3D folosind rotateZ(90deg) pentru a-l roti în jurul axei Z.
Rezultat: pagină HTML completă
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotateZ()</title>
<style>
#myDiv {
width: 100px;
height: 100px;
background-color: #4CAF50;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 50px;
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<h1>The rotateZ() Function</h1>
<div id="myDiv">Hello</div>
</body>
</html>