CSS3 - 3D Transformacija (3D Transforms)

3D transformacija elemenata

Pomoću CSS3 3D svojstva transformacije možete izvoditi osnovne manipulacije transformacijom poput pomicanja, rotiranja, skaliranja i iskrivljavanja elemenata u trodimenzionalnom 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 transformiranom) mjestu.


Korištenje CSS funkcija transformacije

Svojstvo transformacije u CSS3 koriste funkcije pretvaranja za manipulaciju koordinatnim sistemom koji koristi element kako bi primijenio efekt transformacije. Sljedeći dio opisuje funkcije 3D transformacije:


Funkcija translate3d()

Premještanje element iz trenutnog položaja u novi položaj duž X, Y i Z ose. Ovo se može napisati kao translate(tx, ty, tz). Vrijednosti postotka nisu dopuštene za treći parametar translation-value (tj. tz). 

.container {
    width: 125px;
    height: 125px;
    perspective: 500px;
    border: 4px solid #e5a043;
    background: #fff2dd;
}
.transformed {
    -webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
    transform: translate3d(25px, 25px, 50px); /* Standardna sintaksa */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 translate3d() metode</title>
<style>
.container{
  width: 125px;
    height: 125px;
    perspective: 500px;
    border: 4px solid #e5a043;
    background: #fff2dd;
  margin: 30px;
}
.transformed {
    -webkit-transform: translate3d(25px, 25px, 50px); /* Chrome, Safari, Opera */
    transform: translate3d(25px, 25px, 50px); /* Standardna sintaksa */
}
</style>
</head>
<body>
    <h2>Prije translate3d() :</h2>
    <div class="container">
        <img src="/examples/images/diamond.jpg" alt="Diamond Card">
    </div>
    <h2>Poslje translate3d() :</h2>
    <div class="container">
        <img src="/examples/images/diamond.jpg" class="transformed" alt="Diamond Card">
    </div>
</body>
</html>

Funkcija translate3d(25px, 25px, 50px) pomiče sliku za 25px duž pozitivne X i Y ose, a 50px duž pozitivne Z ose.


3D transformacija, međutim, koristi trodimenzionalni koordinatni sistem, ali kretanje po Z-smjeru nije uvijek uočljivo, jer elementi postoje na dvodimenzionalnoj ravni (ravna površina) i nemaju dubinu.CSS svojstva perspective i perspective-origin mogu se koristiti za dodavanje osjećaja dubine sceni tako što će elementi viši na Z osi, tj. bliže gledaocu izgledati veći, a oni dalje od gledaoca manji.


Funkcija rotate3d()

Funkcija rotate3d() rotira element u 3D prostoru za navedeni ugao oko vektora smjera [x,y,z]. To se može zapisati kao rotate(vx, vy, vz, angle). 

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #a2b058;
    background: #f0f5d8;
}
.transformed {
    -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
    transform: rotate3d(0, 1, 0, 60deg); /* Standardna sintaksa */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 rotate3d() metode</title>
<style>
.container{
    margin: 50px;
  width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #a2b058;
    background: #f0f5d8;
}
.transformed {
    -webkit-transform: rotate3d(0, 1, 0, 60deg); /* Chrome, Safari, Opera */
    transform: rotate3d(0, 1, 0, 60deg); /* Standard syntax */
}
</style>
</head>
<body>
    <h2>Prije rotacije:</h2>
    <div class="container">
        <img src="/examples/images/club.jpg" alt="Club Card">
    </div>
    <h2>Poslje rotacije:</h2>
    <div class="container">
        <img src="/examples/images/club.jpg" class="transformed" alt="Club Card">
    </div>
</body>
</html>

Funkcija rotate3d(0, 1, 0, 60deg) rotira sliku duž Y ose za ugao od 60 stepeni. Možete koristiti negativne vrijednosti za rotiranje elementa u suprotnom smjeru.


Funkcija scale3d()

Funkcija scale3d() mijenja veličinu elementa. Može se zapisati kao scale(sx, sy, sz). Učinak ove funkcije nije očit ako je ne koristite u kombinaciji s drugim funkcijama pretvaranja, kao što su rotacija i perspektiva, kao što je prikazano u sljedećem primjeru. 

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #6486ab;
    background: #e9eef3;
}
.transformed {
    -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Standardna sintaksa */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of CSS3 scale3d() Method</title>
<style>
.container{
    margin: 50px;
  width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #6486ab;
    background: #e9eef3;
}
.transformed {
    -webkit-transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Chrome, Safari, Opera */
    transform: scale3d(1, 1, 2) rotate3d(1, 0, 0, 60deg); /* Standardna sintaksa */
}
</style>
</head>
<body>
    <h2>Prije skaliranja:</h2>
    <div class="container">
        <img src="/examples/images/spade.jpg" alt="Club Card">
    </div>
    <h2>Poslje skaliranja:</h2>
    <div class="container">
        <img src="/examples/images/spade.jpg" class="transformed" alt="Club Card">
    </div>
</body>
</html>

Funkcija scale3d(1, 1, 2) skalira elemente duž Z ose, a funkcija rotate3d(1, 0, 0, 60deg) rotira sliku duž X ose za ugao od 60 stepeni.


Funkcija matrix3d()

Funkcija matrix3d() može odjednom izvesti sve 3D transformacije, kao što su: translate, rotate i scale. Potrebno je 16 parametara u obliku matrice transformacije 4 × 4. Evo primjera izvođenja 3D transformacije pomoću funkcije matrix3d(). 

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #d14e46;
    background: #fddddb;
}
.transformed {
    -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 
    0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1);
    /* Chrome, Safari, Opera */
    transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951,
    0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* 
    Standardna sintaksa */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 matrix3d() metode</title>
<style>
.container{
    margin: 50px;
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #d14e46;
    background: #fddddb;
}
.transformed {
    -webkit-transform: matrix3d(0.359127, -0.469472, 0.806613, 0,
    0.190951, 0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* Chrome, Safari, Opera */
    transform: matrix3d(0.359127, -0.469472, 0.806613, 0, 0.190951, 
    0.882948, 0.428884, 0, -0.913545, 0, 0.406737, 0, 0, 0, 0, 1); /* Standardna sintaksa */
}
</style>
</head>
<body>
    <h2>Prije transformacije:</h2>
    <div class="container">
        <img src="/examples/images/heart.jpg" alt="Heart Card">
    </div>
    <h2>Poslje transformacije:</h2>
    <div class="container">
        <img src="/examples/images/heart.jpg" class="transformed" alt="Heart Card">
    </div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:

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

.container{
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #a2b058;
    background: #f0f5d8;
}
.transformed {
    -webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */
    transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Standardna sintaksa */
}
Pogledajmo kako koristiti primjer u praksi:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Primjer CSS3 višestruke 3D transformacije</title>
<style>
.container{
    margin: 50px;
    width: 125px;
    height: 125px;
    perspective: 300px;
    border: 4px solid #d14e46;
    background: #fddddb;
}
.transformed {
    -webkit-transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Chrome, Safari, Opera */
    transform: translate3d(0, 0, 60px) rotate3d(0, 1, 0, -60deg) scale3d(1, 1, 2); /* Standardna sintaksa */
}
</style>
</head>
<body>
    <h2>Prije transformacije:</h2>
    <div class="container">
        <img src="/examples/images/heart.jpg" alt="Heart Card">
    </div>
    <h2>Poslje transformacije:</h2>
    <div class="container">
        <img src="/examples/images/heart.jpg" class="transformed" alt="Heart Card">
    </div>
</body>
</html>

Prikaz koda iz gornjeg primjera izgledaće odprilike ovako:


Funkcije 3D transformacije

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

Funkcija Opis
translate3d(tx,ty,tz) Pomiče element za zadani iznos duž X, Y i Z ose.
translateX(tx) Pomiče element za zadani iznos duž X ose.
translateY(ty) Pomiče element za zadani iznos duž Y ose.
translateZ(tz) Pomiče element za zadani iznos duž Z ose.
rotate3d(x,y,z, a) Rotira element u 3D prostoru za ugao naveden u posljednjem parametru, oko vektora smjera [x,y,z].
rotateX(a) Rotira element za zadani ugao oko X ose.
rotateY(a) Rotira element za zadani ugao oko Y ose.
rotateZ(a) Rotira element za zadani ugao oko Z ose.
scale3d(sx,sy,sz) Skalira element za zadani iznos duž X, Y i Z ose. Funkcija scale3d(1,1,1) nema efekta.
scaleX(sx) Skalira element duž X ose.
scaleY(sx) Skalira element duž Y ose.
scaleZ(sx) Skalira element duž Z ose.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Navodi 3D transformaciju u obliku matrice transformacije 4×4 od 16 vrijednosti.
perspective(length) Definiše pogled u perspektivi za 3D transformisani element. Uopšteno, kako se vrijednost ove funkcije povećava, element će se pojavljivati dalje od gledaoca.