Autor publikacji: Virtual Patriot - Administrator

transform

Data publikacji: Marzec 30 2012
Ostatnio edytowano: Wrzesień 07 2020

Zobacz również: w3.org - transform property (LV1)

Przeznaczenie właściwości `transform`

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

Informacje dodatkowe: brak

Informacje techniczne o właściwości `transform`

przeznaczenie: element HTML każdego typu, lecz nie element HTML typu table-column-group, table-column
pozycja: dowolna
dziedziczenie: nie
wartość initial: none
wyjątki initial: brak
animowanie: tak

Interpretacja właściwości `transform`

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

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

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

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

none

Wyjaśnienie

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

  transform:none;

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

perspective()

Wyjaśnienie

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

  transform:perspective(300px) rotateX(45deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translateX()

Wyjaśnienie

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

  transform:translateX(50px);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translateY()

Wyjaśnienie

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

  transform:translateY(25px);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translate()

Wyjaśnienie

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

  transform:translate(50px, 75px);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translateZ()

Wyjaśnienie

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

  transform:perspective(300px) translateZ(40px);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

translate3d()

Wyjaśnienie

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

  transform:perspective(300px) translate3d(50px, 75px, 40px);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scaleX()

Wyjaśnienie

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

  transform:scaleX(1.25);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scaleY()

Wyjaśnienie

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

  transform:scaleY(0.75);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scale()

Wyjaśnienie

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

  transform:scale(1.25, 0.75);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scaleZ()

Wyjaśnienie

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

  transform:perspective(300px) scaleZ(0.5) translateZ(200px);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

scale3d()

Wyjaśnienie

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

  transform:perspective(300px) scale3d(0.75, 1.25, 0.5) translateZ(200px);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

skewX()

Wyjaśnienie

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

  transform:skewX(30deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

skewY()

Wyjaśnienie

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

  transform:skewY(30deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

skew()

Wyjaśnienie

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

  transform:skew(30deg, 20deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotate()

Wyjaśnienie

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

  transform:rotate(60deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotateX()

Wyjaśnienie

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

  transform:perspective(300px) rotateX(45deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotateY()

Wyjaśnienie

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

  transform:perspective(300px) rotateY(45deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotateZ()

Wyjaśnienie

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

  transform:perspective(300px) rotateZ(45deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

rotate3d()

Wyjaśnienie

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

  transform:perspective(300px) rotate3d(1, 1, 1, 45deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

matrix()

Wyjaśnienie

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

  transform:matrix(0.8660254, 0.5, -0.5, 0.8660254, 0, 0);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

matrix3d()

Wyjaśnienie

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

  transform:perspective(300px) matrix3d(0.7071067, 0, -0.7071067, 0, 0, 1, 0, 0, 0.7071067, 0, 0.7071067, 0, 0, 0, 0, 1);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>

kombinacja wartości

Wyjaśnienie

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

  transform:translateX(100px) rotate(30deg);

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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>div</div>

  </body>
</html>