CSS3 - 2D Transformacija (2D Transforms)


2D transformacija elemenata

Pomoću CSS3 2D svojstva transformacije možete izvoditi osnovne manipulacije transformacijom poput pomicanja, rotiranja, skaliranja i iskrivljavanja elemenata u dvodimenzionalnom prostoru. Transformisani element ne utiče na okolne elemente, ali ih može preklapati, baš kao i apsolutno pozicionirani elementi. Međutim, transformisani element i dalje zauzima prostor u izgledu na svom zadanom (ne transformisanom) mjestu.



Korištenje CSS funkcija transformacije i transformacije

Svojstvo transform CSS3 koristi funkcije pretvaranja za manipulaciju koordinatnim sistemom koji koristi element kako bi primijenio efekt transformacije. Sljedeći dio opisuje ove funkcije transformacije:



Funkcija translate()

Premještanje element iz trenutnog položaja u novi položaj duž osi X i Y. Ovo se može napisati kao translate(tx, ty). Ako ty nije naveden, pretpostavlja se da je njegova vrijednost nula.

img {
    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px);  /* Firefox */
        -ms-transform: translate(200px, 50px);  /* IE 9 */
            transform: translate(200px, 50px);  /* Standardna sintaksa */    
}img {
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 translate() metode</title>
<style>
    img {
    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px);  /* Firefox */
      -ms-transform: translate(200px, 50px);  /* IE 9 */
        transform: translate(200px, 50px);  /* Standardna sintaksa */    
  }
    .box{
        margin: 50px;
        width:153px;
        height:103px;
        background: url("/examples/images/tortoise-transparent.png") no-repeat;
    }
</style>
</head>
<body>
    <div class="box">
      <img src="/examples/images/tortoise.png" alt="Kornjača">
    </div>
</body>
</html>

Funkcija translate(200px, 50px) pomiče sliku za 200 piksela vodoravno duž pozitivne x osi i 50 piksela vertikalno duž pozitivne osi y.



Funkcija rotate()

Funkcija rotate() rotira element oko njegovog ishodišta (kako je određeno svojstvom transform-origin) za navedeni ugao. Ovo se može zapisati kao rotate(a).

img {
    -webkit-transform: rotate(30deg);  /* Chrome, Safari, Opera */
       -moz-transform: rotate(30deg);  /* Firefox */
        -ms-transform: rotate(30deg);  /* IE 9 */
            transform: rotate(30deg);  /* Standardna sintaksa */    
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 rotate() metode</title>
<style>
    img {
    -webkit-transform: rotate(30deg);  /* Chrome, Safari, Opera */
       -moz-transform: rotate(30deg);  /* Firefox */
      -ms-transform: rotate(30deg);  /* IE 9 */
        transform: rotate(30deg);  /* Moderni Browseri */    
  }
    .box{
        margin: 50px;
        width:120px;
        height:110px;
        background: url("/examples/images/star-fish-transparent.png") no-repeat;
    }
</style>
</head>
<body>
    <div class="box">
      <img src="/examples/images/star-fish.png" alt="Morska zvijezda">
    </div>
</body>
</html>

Funkcija rotate(30deg) rotira sliku u smeru kazaljke na satu oko njenog ishodišta za ugao od 30 stepeni. Možete koristiti negativne vrijednosti za rotiranje elementa u smjeru suprotnom od kazaljke na satu.





Funkcija scale()

Funkcija scale() povećava ili smanjuje veličinu elementa. Može se zapisati kao scale(sx,sy). Ako sy nije naveden, pretpostavlja se da je jednak sx.

img {
    -webkit-transform: scale(1.5);  /* Chrome, Safari, Opera */
       -moz-transform: scale(1.5);  /* Firefox */
        -ms-transform: scale(1.5);  /* IE 9 */
            transform: scale(1.5);  /* Moderni Browseri */    
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 scale() metoda</title>
<style>
  img {
    -webkit-transform: scale(1.5);  /* Chrome, Safari, Opera */
       -moz-transform: scale(1.5);  /* Firefox */
      -ms-transform: scale(1.5);  /* IE 9 */
        transform: scale(1.5);  /* Moderni Browseri */
        opacity: 0.5;
  }
    .box{
        margin: 50px;
        width:103px;
        height:130px;
        background: url("/examples/images/octopus.png") no-repeat;
    }
</style>
</head>
<body>
    <div class="box">
      <img src="/examples/images/octopus.png" alt="Hobotnica">
    </div>
</body>
</html>

Funkcije scale(1.5) proporcionalno skalira širinu i visinu slike 1,5 puta do izvorne veličine. Funkcije scale(1) ili scale(1,1) nema uticaja na element.




Funkcija skew()

Funkcija skew() kosi element duž osi X i Y za navedene uglove. Može se zapisati kao skew(ax, ay). Ako ay nije naveden, pretpostavlja se da je njegova vrijednost nula.

img {
    -webkit-transform: skew(-40deg, 15deg);  /* Chrome, Safari, Opera */
       -moz-transform: skew(-40deg, 15deg);  /* Firefox */
        -ms-transform: skew(-40deg, 15deg);  /* IE 9 */
            transform: skew(-40deg, 15deg);  /* Moderni Browseri */    
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 skew() metode</title>
<style>
  img {
    -webkit-transform: skew(-40deg, 15deg);  /* Chrome, Safari, Opera */
       -moz-transform: skew(-40deg, 15deg);  /* Firefox */
      -ms-transform: skew(-40deg, 15deg);  /* IE 9 */
        transform: skew(-40deg, 15deg);  /* Moderni Browseri */    
  }
    .box{
        margin: 50px;
        width:153px;
        height:103px;
        background: url("/examples/images/snail-transparent.png") no-repeat;
    }
</style>
</head>
<body>
    <div class="box">
      <img src="/examples/images/snail.png" alt="Puž">
    </div>
</body>
</html>

Funkcija skew(-40deg, 15deg) kosi element -40 stepeni vodoravno duž x-ose i 15 stepeni vertikalno duž y-osi.




Funkcija matrix()

Funkcija matrix() može odjednom izvesti sve 2D transformacije, kao što su: translate, rotate, scale, i skew. Potrebno je šest parametara u obliku matrice koja se može zapisati kao matrix(a, b, c, d, e, f). Sljedeći dio će vam pokazati kako svaka od 2D funkcija transformacije može biti predstavljena pomoću funkcije matrix().

  • translate(tx, ty) = matrix(1, 0, 0, 1, tx, ty); - gdje su tx i ty vodoravne i horizontalne vrijednosti prevođenja.
  • rotate(a) = matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0); - gdje je a vrijednost u stepenima. Možete zamijeniti vrijednosti sin(a) i -sin(a) da biste okrenuli rotaciju unazad. Maksimalna rotacija koju biste mogli izvesti je 360 stepeni.
  • scale(sx, sy) = matrix(sx, 0, 0, sy, 0 ,0); — gdje su sx i sy vodoravne i horizontalne vrijednosti skaliranja.
  • skew(ax, ay) = matrix(1, tan(ay), tan(ay), 1, 0 ,0); — gdje su ax i ay vodoravne i horizontalne vrijednosti u stepenovima.

Evo primjera izvođenja 2D transformacije pomoću funkcije matrix().

img {
    -webkit-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Firefox */
        -ms-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* IE 9 */
            transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Standardna sintaksa */
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 matrix() metode</title>
<style>
    img {
    -webkit-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Firefox */
      -ms-transform: matrix(0, -1, 1, 0, 200px, 50px);  /* IE 9 */
        transform: matrix(0, -1, 1, 0, 200px, 50px);  /* Moderni Browseri */
  }
    .box{
        margin: 50px;
        width: 108px;
        height: 136px;
        background: url("/examples/images/mushroom-transparent.png") no-repeat;
    }
</style>
</head>
<body>
    <div class="box">
      <img src="/examples/images/mushroom.png" alt="Gljiva">
    </div>
</body>
</html>

Pogledajmo izgled primjera koji smo upravo uradili.



Međutim, kada se izvodi više transformacija odjednom, prikladnije je koristiti pojedinačnu funkciju transformacije i navesti ih redom, ovako:

img {
    -webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Firefox */
        -ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* IE 9 */
            transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Standardna sintaksa */    
}
Pogledajmo kako koristiti primjer u praksi:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 višestruke 2D transformacije</title>
<style>
    img {
    -webkit-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Firefox */
      -ms-transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* IE 9 */
        transform: translate(200px, 50px) rotate(180deg) scale(1.5) skew(0, 30deg);  /* Moderni Browseri */    
  }
    .box{
        margin: 50px;
        width: 108px;
        height: 136px;
        background: url("/examples/images/mushroom-transparent.png") no-repeat;
    }
</style>
</head>
<body>
    <div class="box">
      <img src="/examples/images/mushroom.png" alt="Gljiva">
    </div>
</body>
</html>

Pogledajmo izgled primjera koji smo upravo uradili.




2D funkcije transformacije

Sljedeća tabela daje kratak pregled svih 2D funkcija transformacije.

Funkcija Opis
translate(tx,ty) Pomiče element za zadati iznos duž X i Y ose.
translateX(tx) Pomiče element za zadati iznos duž X ose.
translateY(ty) Pomiče element za zadati iznos duž Y ose.
rotate(a) Rotira element za navedeni ugao oko ishodišta elementa, kako je definisano svojstvom transform-origin.
scale(sx,sy) Povećajte širinu i visinu elementa prema gore ili dole za zadati iznos. Funkcija scale(1,1) nema učinka.
scaleX(sx) Povećajte širinu elementa prema gore ili dole za zadati iznos.
scaleY(sy) Povećajte visinu elementa prema gore ili dole za zadati iznos.
skew(ax,ay) Naginje element za zadati ugao duž X i Y ose.
skewX(ax) Naginje element za zadati ugao duž X ose.
skewY(ay) Naginje element za zadati ugao duž Y ose.
matrix(n,n,n,n,n,n) Specifikuje 2D transformaciju u obliku matrice koja se sastoji od šest vrijednosti.