Transformări 2D în CSS

Transformări CSS 2D

Mutarea, rotirea, redimensionarea și înclinarea unui element trec toate prin aceeași proprietate CSS, transform, care gestionează transformările fie în 2D, fie în 3D.

Funcțiile de transformare CSS 2D

Pentru lucrul în două dimensiuni, transform acceptă aceste funcții:

translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()

Funcția CSS translate()

Dă-i lui translate() o valoare pentru axa X și una pentru axa Y, iar elementul se deplasează cu aceste distanțe față de locul în care se află acum.

Exemplu

Elementul <div> de aici ajunge cu 100 de pixeli mai jos și cu 50 de pixeli mai la dreapta față de punctul de plecare.

Creați o pagină HTML cu un element div care folosește CSS `transform: translate(50px, 100px)` pentru a-l muta cu 50 de pixeli la dreapta și 100 de pixeli în jos față de poziția sa inițială. Afișați un chenar sau o culoare de fundal astfel încât mișcarea să fie vizibilă.

> Rezultat: pagină HTML completă

Prompt

Creați o pagină HTML cu un element div care folosește CSS transform: translate(50px, 100px) pentru a-l muta cu 50 de pixeli la dreapta și 100 de pixeli în jos față de poziția sa inițială. Afișați un chenar sau o culoare de fundal astfel încât mișcarea să fie vizibilă.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS translate()</title>
<style>
div.moved {
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  transform: translate(50px, 100px);
}
</style>
</head>
<body>

<h1>The translate() Function</h1>

<p>The translate() function moves an element from its current position:</p>

<div class="moved">
This div is moved 50px to the right and 100px down.
</div>

</body>
</html>

Funcția CSS rotate()

Ca să rotești un element, îi dai lui rotate() un număr de grade. Sensul poate fi fie cel al acelor de ceasornic, fie invers acelor de ceasornic.

Rotire în sensul acelor de ceasornic

Elementului <div> de mai jos i se aplică o rotire de 20 de grade în sensul acelor de ceasornic.

Creați o pagină HTML cu un element div care folosește CSS `transform: rotate(20deg)` pentru a-l roti cu 20 de grade în sensul acelor de ceasornic. Dați div-ului o culoare de fundal și puțin padding astfel încât rotația să fie vizibilă.

> Rezultat: pagină HTML completă

Prompt

Creați o pagină HTML cu un element div care folosește CSS transform: rotate(20deg) pentru a-l roti cu 20 de grade în sensul acelor de ceasornic. Dați div-ului o culoare de fundal și puțin padding astfel încât rotația să fie vizibilă.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotate() Clockwise</title>
<style>
div.rotated {
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  margin: 50px;
  transform: rotate(20deg);
}
</style>
</head>
<body>

<h1>The rotate() Function</h1>

<p>The rotate() function rotates an element clockwise:</p>

<div class="rotated">
This div is rotated clockwise 20 degrees.
</div>

</body>
</html>

Rotire în sens invers acelor de ceasornic

Pentru rotirea în sens opus este suficientă o valoare negativă. Mai jos, același <div> se rotește cu 20 de grade în sens invers acelor de ceasornic.

Creați o pagină HTML cu un element div care folosește CSS `transform: rotate(-20deg)` pentru a-l roti cu 20 de grade în sens invers acelor de ceasornic. Dați div-ului o culoare de fundal și puțin padding astfel încât rotația să fie vizibilă.

> Rezultat: pagină HTML completă

Prompt

Creați o pagină HTML cu un element div care folosește CSS transform: rotate(-20deg) pentru a-l roti cu 20 de grade în sens invers acelor de ceasornic. Dați div-ului o culoare de fundal și puțin padding astfel încât rotația să fie vizibilă.

Rezultat: pagină HTML completă

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS rotate() Counter-clockwise</title>
<style>
div.rotated {
  width: 200px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
  margin: 50px;
  transform: rotate(-20deg);
}
</style>
</head>
<body>

<h1>The rotate() Function</h1>

<p>Using negative values rotates the element counter-clockwise:</p>

<div class="rotated">
This div is rotated counter-clockwise 20 degrees.
</div>

</body>
</html>

Proprietăți CSS Transform

Toate proprietățile disponibile pentru transformările 2D apar în acest tabel.

Tabel de proprietăți Transform

<table>
  <tr><th>Property</th><th>Description</th></tr>
  <tr><td>transform</td><td>Applies a 2D or 3D transformation to an element</td></tr>
  <tr><td>transform-origin</td><td>Allows you to change the position on transformed elements</td></tr>
</table>