Funkcja jako wartość właściwości CSS

Wraz z nowymi właściwościami CSS, które pojawiły się podczas rozwoju specyfikacji CSS3 i które są ciągle dodawane do języka CSS, możemy natrafić na właściwości, które wymagają abyśmy podali nazwę funkcji oraz parametr lub parametry tej funkcji, dzięki czemu dana właściwość CSS zareaguje na element HTML, w odpowiedni sposób.

Taką przykładową właściwością CSS jest właściwość transform. Właściwość ta służy do przekształcenia elementu HTML na różne sposoby w przestrzeni 2D oraz 3D. Przekształcenie elementu HTML będzie możliwe, jeżeli podamy poprawną nazwę danej funkcji, która została stworzona po to, abyśmy mogli przekształcać nasze elementy HTML, w dowolny, dostępny sposób.

Przykładowo, funkcja rotate() służy do obrócenia elementu HTML w przestrzeni 2D, jednak sam zapis transform:rotate(); nie wystarczy, ponieważ do nawiasu funkcji rotate() musimy dodać jakąś wartość (która jest nazywana parametrem funkcji). Wspomnianą wartość możemy podać w jednostce deg, czyli w stopniach, dzięki czemu przeglądarka internetowa będzie wiedziała o ile stopni ma obrócić dany element HTML.

Przykładowo, właściwość transform:rotate(45deg); obróci element HTML o 45 stopni w prawo, co zostało zaprezentowane poniżej:

element - div

W niektórych funkcjach możemy podać dwa lub więcej parametrów, w takim wypadku każdy parametr należy oddzielić przecinkiem.

Przykładowo, właściwość transform:skew(10deg,15deg); pochyli element HTML o 10 stopni do poziomu oraz o 15 stopni do pionu, co zostało zaprezentowane poniżej:

element - div

Ponadto może zdarzyć się, że do jednej właściwości CSS możemy dodać kilka funkcji jednocześnie i właśnie taką właściwością CSS jest właściwość transform.

Przykładowo, właściwość transform:rotate(45deg) skew(10deg,15deg); obróci element HTML o 45 stopni w prawo, a następnie pochyli element HTML o 10 stopni do poziomu oraz o 15 stopni do pionu, co zostało zaprezentowane poniżej:

element - div

Gdybyśmy, w tym wypadku, zamienili kolejność podawania zaprezentowanych funkcji, to właściwość transform:skew(10deg,15deg) rotate(45deg); pierw pochyli element HTML o 10 stopni do poziomu oraz o 15 stopni do pionu, a następnie obróci element HTML o 45 stopni w prawo, co zostało zaprezentowane poniżej:

element - div

Kod HTML ostatniego przykładu został umieszczony pod spodem:

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

    <style>
      div {
        width:150px;
        line-height:150px;
        margin:0 auto;
        text-align:center;
        background-color:lightblue;
        border:1px solid #000;
        transform:skew(10deg,15deg) rotate(45deg); /* dla wszystkich w przyszłości */
        -webkit-transform:skew(10deg,15deg) rotate(45deg); /* dla Google Chrome, Safari, Opera 15+ */
        -ms-transform:skew(10deg,15deg) rotate(45deg); /* dla Internet Explorer */
      }
    </style>
  </head>

  <body>

    <div>element - div</div>

  </body>
</html>

W następnej części kursu CSS dowiemy się, które z jednostek CSS są jednostkami relatywnymi i do czego możemy wykorzystać taką relatywną jednostkę w naszym kodzie.