Ostatnio edytowany:

transform

Autor: Virtual Patriot

Opis właściwości transform

Za pomocą właściwości transform możemy przekształcić interesujący nas element HTML w przestrzeni.

Dodatkowe techniczne informacje o właściwości transform

przeznaczenie
  • element HTML każdego typu
dziedziczenie
  • nie
wartość initial
wyjątki initial
  • brak
animowanie
  • tak

Interpretacja właściwości transform

Firefox

tak

Google Chrome

tak

Safari

tak

Opera

tak

Internet Explorer

tak, lecz od wersji 9 (z przedrostkiem -ms-), natomiast przekształcenia w przestrzeni 3D od wersji 10, ponadto od wersji 10 bez przedrostka -ms-

Edge

tak

Zobacz więcej informacji o interpretacji właściwości (przestrzeń 2D).

Zobacz więcej informacji o interpretacji właściwości (przestrzeń 3D).

Opis wartości właściwości transform

none

Opis

Wartość none jest domyślną wartością właściwości transform.

Domyślnie element HTML nie posiada żadnego dodatkowego przekształcenia w przestrzeni.

Przykład

Przykładowy element "div" nie posiada żadnego dodatkowego przekształcenia w przestrzeni.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

perspective()

Opis

Za pomocą właściwości transform oraz funkcji perspective() możemy określić (potrzebny dla przekształceń w przestrzeni 3D) rozmiar perspektywy interesującego nas elementu HTML.

Przykład

Dzięki temu, że do przykładowego elementu "div" została dodana właściwość "transform" wraz z następującą kombinacją wartości: "perspective(300px) rotateX(45deg)", do wspomnianego elementu "div" została dodana perspektywa o rozmiarze 300 pikseli, a wspomniany element "div" mógł zostać obrócony w przestrzeni 3D względem poziomej osi X o kąt 45 stopni.

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) rotateX(45deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translateX()

Opis

Za pomocą właściwości transform oraz funkcji translateX() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na przesunięciu elementu HTML względem poziomej osi X.

Przykład

Przykładowy element "div" został przesunięty w prawo o 50 pikseli względem poziomej osi X, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "translateX()", w której to funkcji została użyta wartość "50px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:translateX(50px);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translateY()

Opis

Za pomocą właściwości transform oraz funkcji translateY() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na przesunięciu elementu HTML względem pionowej osi Y.

Przykład

Przykładowy element "div" został przesunięty w dół o 25 pikseli względem pionowej osi Y, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "translateY()", w której to funkcji została użyta wartość "25px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:translateY(25px);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translate()

Opis

Za pomocą właściwości transform oraz funkcji translate() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na jednoczesnym przesunięciu elementu HTML względem poziomej osi X oraz względem pionowej osi Y.

Przykład

Przykładowy element "div" został przesunięty w prawo o 50 pikseli względem poziomej osi X oraz w dół o 75 pikseli względem pionowej osi Y, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "translate()", w której to funkcji zostały użyte następujące wartości: "50px, 75px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:translate(50px, 75px);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translateZ()

Opis

Za pomocą właściwości transform oraz funkcji translateZ() możemy przekształcić interesujący nas element HTML w przestrzeni 3D. Wspomniane przekształcenie polega na przesunięciu elementu HTML względem prostopadłej do punktu zero osi Z.

Przykład

Przykładowy element "div" został przysunięty do naszego wzroku o 40 pikseli względem prostopadłej do punktu zero osi Z, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "translateZ()", w której to funkcji została użyta wartość "40px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) translateZ(40px);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translate3d()

Opis

Za pomocą właściwości transform oraz funkcji translate3d() możemy przekształcić interesujący nas element HTML w przestrzeni 3D. Wspomniane przekształcenie polega na jednoczesnym przesunięciu elementu HTML względem poziomej osi X oraz względem pionowej osi Y oraz względem prostopadłej do punktu zero osi Z.

Przykład

Przykładowy element "div" został przesunięty w prawo o 50 pikseli względem poziomej osi X oraz w dół o 75 pikseli względem pionowej osi Y oraz do naszego wzroku o 40 pikseli względem prostopadłej do punktu zero osi Z, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "translate3d()", w której to funkcji zostały użyte następujące wartości: "50px, 75px, 40px".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) translate3d(50px, 75px, 40px);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scaleX()

Opis

Za pomocą właściwości transform oraz funkcji scaleX() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na przeskalowaniu rozmiaru szerokości elementu HTML względem poziomej osi X.

Przykład

Rozmiar szerokości przykładowego elementu "div" został przeskalowany o wartość "1.25" względem poziomej osi X, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "scaleX()", w której to funkcji została użyta wartość "1.25".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:scaleX(1.25);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scaleY()

Opis

Za pomocą właściwości transform oraz funkcji scaleY() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na przeskalowaniu rozmiaru wysokości elementu HTML względem pionowej osi Y.

Przykład

Rozmiar wysokości przykładowego elementu "div" został przeskalowany o wartość "0.75" względem pionowej osi Y, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "scaleY()", w której to funkcji została użyta wartość "0.75".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:scaleY(0.75);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scale()

Opis

Za pomocą właściwości transform oraz funkcji scale() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na jednoczesnym przeskalowaniu rozmiaru szerokości elementu HTML względem poziomej osi X oraz rozmiaru wysokości elementu HTML względem pionowej osi Y.

Przykład

Rozmiar szerokości przykładowego elementu "div" został przeskalowany o wartość "1.25" względem poziomej osi X, natomiast rozmiar wysokości przykładowego elementu "div" został przeskalowany o wartość "0.75" względem pionowej osi Y, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "scale()", w której to funkcji zostały użyte następujące wartości: "1.25, 0.75".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:scale(1.25, 0.75);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scaleZ()

Opis

Za pomocą właściwości transform oraz funkcji scaleZ() możemy przekształcić interesujący nas element HTML w przestrzeni 3D. Wspomniane przekształcenie polega na dodatkowym przeskalowaniu elementu HTML względem prostopadłej do punktu zero osi Z.

Przykład

Przykładowy element "div" po przekształceniu za pomocą funkcji "translateZ()" został dodatkowo przeskalowany o wartość "0.5" względem prostopadłej do punktu zero osi Z, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "scaleZ()", w której to funkcji została użyta wartość "0.5".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) scaleZ(0.5) translateZ(200px);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scale3d()

Opis

Za pomocą właściwości transform oraz funkcji scale3d() możemy przekształcić interesujący nas element HTML w przestrzeni 3D. Wspomniane przekształcenie polega na jednoczesnym przeskalowaniu rozmiaru szerokości elementu HTML względem poziomej osi X oraz rozmiaru wysokości elementu HTML względem pionowej osi Y, jak również na dodatkowym przeskalowaniu elementu HTML względem prostopadłej do punktu zero osi Z.

Przykład

Rozmiar szerokości przykładowego elementu "div" został przeskalowany o wartość "0.75" względem poziomej osi X, dodatkowo rozmiar wysokości przykładowego elementu "div" został przeskalowany o wartość "1.25" względem pionowej osi Y, ponadto wspomniany element "div" po przekształceniu za pomocą funkcji "translateZ()" został dodatkowo przeskalowany o wartość "0.5" względem prostopadłej do punktu zero osi Z, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "scale3d()", w której to funkcji zostały użyte następujące wartości: "0.75, 1.25, 0.5".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) scale3d(0.75, 1.25, 0.5) translateZ(200px);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

skewX()

Opis

Za pomocą właściwości transform oraz funkcji skewX() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na pochyleniu elementu HTML względem poziomej osi X.

Przykład

Przykładowy element "div" został pochylony w lewo o kąt 30 stopni względem poziomej osi X, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "skewX()", w której to funkcji została użyta wartość "30deg".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:skewX(30deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

skewY()

Opis

Za pomocą właściwości transform oraz funkcji skewY() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na pochyleniu elementu HTML względem pionowej osi Y.

Przykład

Przykładowy element "div" został pochylony w górę o kąt 30 stopni względem pionowej osi Y, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "skewY()", w której to funkcji została użyta wartość "30deg".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:skewY(30deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

skew()

Opis

Za pomocą właściwości transform oraz funkcji skew() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na pochyleniu elementu HTML względem dwóch kątów naraz.

Przykład

Przykładowy element "div" został pochylony w lewo o kąt 30 stopni względem poziomej osi X, jak również w górę o kąt 20 stopni względem pionowej osi Y, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "skew()", w której to funkcji zostały użyte następujące wartości: "30deg, 20deg".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:skew(30deg, 20deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotate()

Opis

Za pomocą właściwości transform oraz funkcji rotate() możemy przekształcić interesujący nas element HTML w przestrzeni 2D. Wspomniane przekształcenie polega na obrocie elementem HTML względem punktu zero.

Przykład

Przykładowy element "div" został obrócony w prawo o kąt 60 stopni względem punktu zero, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "rotate()", w której to funkcji została użyta wartość "60deg".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:rotate(60deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotateX()

Opis

Za pomocą właściwości transform oraz funkcji rotateX() możemy przekształcić interesujący nas element HTML w przestrzeni 3D. Wspomniane przekształcenie polega na obrocie elementem HTML względem poziomej osi X.

Przykład

Przykładowy element "div" został obrócony w domyślnym kierunku o kąt 45 stopni względem poziomej osi X, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "rotateX()", w której to funkcji została użyta wartość "45deg".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) rotateX(45deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotateY()

Opis

Za pomocą właściwości transform oraz funkcji rotateY() możemy przekształcić interesujący nas element HTML w przestrzeni 3D. Wspomniane przekształcenie polega na obrocie elementem HTML względem pionowej osi Y.

Przykład

Przykładowy element "div" został obrócony w domyślnym kierunku o kąt 45 stopni względem pionowej osi Y, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "rotateY()", w której to funkcji została użyta wartość "45deg".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) rotateY(45deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotateZ()

Opis

Za pomocą właściwości transform oraz funkcji rotateZ() możemy przekształcić interesujący nas element HTML w przestrzeni 3D. Wspomniane przekształcenie polega na obrocie elementem HTML względem prostopadłej do punktu zero osi Z.

Przykład

Przykładowy element "div" został obrócony w prawo o kąt 45 stopni względem prostopadłej do punktu zero osi Z, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "rotateZ()", w której to funkcji została użyta wartość "45deg".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) rotateZ(45deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotate3d()

Opis

Za pomocą właściwości transform oraz funkcji rotate3d() możemy przekształcić interesujący nas element HTML w przestrzeni 3D. Wspomniane przekształcenie polega na obrocie elementem HTML względem wektora 3D wyznaczonego przez stosunek długości wektorów znajdujących się na osi X, osi Y oraz osi Z.

Przykład

Przykładowy element "div" został obrócony w domyślnym kierunku o kąt 45 stopni względem wektora 3D wyznaczonego przez stosunek długości wektorów znajdujących się na osi X, osi Y oraz osi Z, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "rotate3d()", w której to funkcji zostały użyte następujące wartości: "1, 1, 1, 45deg".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) rotate3d(1, 1, 1, 45deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

matrix()

Opis

Za pomocą właściwości transform oraz funkcji matrix() możemy w dowolny dostępny sposób przekształcić interesujący nas element HTML w przestrzeni 2D wykorzystując do tego celu tylko jedną funkcję.

Przykład

Przykładowy element "div" został obrócony w prawo o kąt 30 stopni względem punktu zero, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z wartością w postaci funkcji "matrix()", w której to funkcji zostały użyte następujące wartości: "0.8660254, 0.5, -0.5, 0.8660254, 0, 0".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:matrix(0.8660254, 0.5, -0.5, 0.8660254, 0, 0);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

matrix3d()

Opis

Za pomocą właściwości transform oraz funkcji matrix3d() możemy w dowolny dostępny sposób przekształcić interesujący nas element HTML w przestrzeni 3D wykorzystując do tego celu tylko jedną funkcję.

Przykład

Przykładowy element "div" został obrócony w domyślnym kierunku o kąt 45 stopni względem pionowej osi Y, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z kombinacją wartości zawierającą między innymi funkcję "matrix3d()", w której to funkcji zostały użyte następujące wartości: "0.7071067, 0, -0.7071067, 0, 0, 1, 0, 0, 0.7071067, 0, 0.7071067, 0, 0, 0, 0, 1".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:perspective(300px) matrix3d(0.7071067, 0, -0.7071067, 0, 0, 1, 0, 0, 0.7071067, 0, 0.7071067, 0, 0, 0, 0, 1);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

kombinacja wartości

Opis

Za pomocą kombinacji kilku (oddzielonych od siebie znakiem spacji) wartości należących do właściwości transform możemy przekształcić interesujący nas element HTML w przestrzeni 2D lub w przestrzeni 3D na kilka różnych sposobów jednocześnie.

Podana przez nas kombinacja wartości właściwości "transform" nie może zawierać wartości none oraz wartości globalnych.

Podana przez nas kolejność wartości kombinacji wartości właściwości "transform" ma znaczenia na ostateczny sposób przekształcenia elementu HTML w przestrzeni.

Przykład

Przykładowy element "div" pierw został przesunięty w prawo o 100 pikseli względem poziomej osi X, a następnie został obrócony w prawo o kąt 30 stopni względem punktu zero, ponieważ do wspomnianego elementu "div" została dodana właściwość "transform" wraz z następującą kombinacją wartości: "translateX(100px) rotate(30deg)".

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        transform:translateX(100px) rotate(30deg);
        margin:0 auto;
        width:300px;
        height:120px;
        font-size:1.3em;
        background-color:#AFF;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>