CSS3 - Wspólna perspektywa elementów HTML w praktyce

Uwaga Niektóre przeglądarki internetowe mogą mieć wciąż problem z interpretowaniem informacji, które zostały zaprezentowane w tej części kursu CSS (Internet Explorer).

W poprzedniej części kursu CSS poznaliśmy w jaki sposób możemy sprawić, aby element HTML znalazł się w zasięgu swojej własnej perspektywy lub w zasięgu perspektywy swojego elementu rodzica. Wiemy, że gdy chcemy wykonać jakieś przekształcenie w przestrzeni 3D element HTML musi znaleźć się w zasięgu perspektywy swojej lub swojego elementu rodzica, dzięki czemu przeglądarka internetowa może prawidłowo wykonać wspomniane przekształcenie, czyli może odwzorować przybliżony obraz elementu HTML, tak jakby ten element HTML znajdowałby się w przestrzeni 3D, czyli w przestrzeni trzech wymiarów.

W tej części kursu CSS postaramy się zobaczyć różnicę pomiędzy sytuacjami, gdy element HTML jest przekształcany w przestrzeni 3D i znajduje się w zasięgu swojej własnej perspektywy lub w zasięgu perspektywy swojego elementu rodzica lub w żądnym zasięgu perspektywy.

Na początek utworzymy przykładowy układ elementów HTML podobny do układu elementów HTML, który został zaprezentowany w poprzedniej części tego kursu CSS.

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

    <style>
      #rodzic {
        position:relative;
        width:300px;
        height:300px;
        margin:0 auto;
        background-color:rgba(255,0,0,0.5);
        color:#FFF;
        font-weight:bold;
        text-align:center;
      }

      #dziecko {
        position:absolute;
        top:90px;
        left:90px;
        width:120px;
        height:120px;
        background-color:#000;
      }
    </style>
  </head>

  <body>

    <div id="rodzic">rodzic
      <div id="dziecko">dziecko</div>
    </div>

  </body>
</html>

Rezultat:

RODZIC
DZIECKO

Nasz przykładowy układ elementów HTML składa się z elementu #rodzic oraz elementu #dziecko, który jest elementem dzieckiem elementu #rodzic.

Spróbujmy dodać do elementu #rodzic perspektywę za pomocą funkcji perspective() właściwości transform oraz obrócić wspomniany element #rodzic w pionie, czyli w okół osi Y, o jakąś przykładową wartość za pomocą funkcji rotateY() właściwości transform.

#rodzic {
  position:relative;
  width:300px;
  height:300px;
  margin:0 auto;
  background-color:rgba(255,0,0,0.5);
  color:#FFF;
  font-weight:bold;
  text-align:center;
  transform:perspective(500px) rotateY(45deg);
}

Rezultat:

RODZIC
DZIECKO

Nasz przykładowy element #rodzic znalazł się w zasięgu swojej własnej perspektywy, której wartość wynosi 500px oraz nasz przykładowy element #rodzic został obrócony o 45 stopni w pionie. W tej sytuacji przeglądarka internetowa mogła prawidłowo odwzorować wygląd elementu #rodzic w przestrzeni 3D, ponieważ przekształcony za pomocą funkcji rotateY(45deg) element #rodzic znalazł się w zasięgu perspektywy, która została utworzona dla niego za pomocą funkcji perspective(500px) oraz właściwości transform.

W naszym przykładzie element #dziecko jest zawartością przekształconego za pomocą funkcji rotateY(45deg) elementu #rodzic. Element #dziecko nie znajduje się w zasięgu żadnej perspektywy, jednak jego wygląd w tej sytuacji jest również prawidłowy, ponieważ nie wykonujemy bezpośrednio na wspomnianym elemencie #dziecko żadnego przekształcenia za pomocą funkcji 3D właściwości transform, lecz wykonujemy tą czynność na elemencie rodzicu elementu #dziecko.

To tak jakby w realnym świecie wziąć dwie kartki papieru, jedną mniejszą, jedną większą, a następnie przykleić mniejszą kartkę papieru do większej kartki papieru i zacząć obracać większą kartką papieru względem pionu.

Animacja zaprezentowana poniżej może bardziej uzmysłowić nam tą zależność.

RODZIC
DZIECKO

Jak do tej pory nasz przykładowy układ elementów HTML prezentuje obrócony o 45 stopni względem pionu element #rodzic, którego zawartością jest element #dziecko.

RODZIC
DZIECKO

W tym momencie spróbujmy wykonać jakieś przekształcenie w przestrzeni 3D na elemencie #dziecko. Jak wiemy, aby przeglądarka internetowa mogła prawidłowo przekształcić wygląd elementu HTML za pomocą funkcji 3D właściwości transform dany element HTML musi znaleźć się w zasięgu perspektywy. Spróbujmy obrócić element #dziecko względem poziomu o jakąś przykładową wartość za pomocą funkcji rotateX(). Dodatkowo sprawmy, aby wspomniany element #dziecko znalazł się w zasięgu swojej własnej perspektywy, co możemy uzyskać dodając do elementu #rodzic właściwość perspective lub dodając do elementu #dziecko właściwość transform wraz z funkcją perspective().

#dziecko {
  position:absolute;
  top:90px;
  left:90px;
  width:120px;
  height:120px;
  background-color:#000;
  transform:perspective(500px) rotateX(45deg);
}

Rezultat:

RODZIC
DZIECKO

W tym momencie nasz przykładowy układ elementów HTML prezentuje dwa elementy HTML umieszczone jeden w drugim. Element #rodzic posiada swoją własną perspektywę utworzoną za pomocą właściwości transform oraz funkcji perspective(500px). Element #dziecko również posiada swoją własną perspektywę utworzoną za pomocą właściwości transform oraz funkcji perspective(500px), co w efekcie daje nam układ elementów HTML z dwoma osobnymi perspektywami. Element #rodzic został obrócony o 45 stopni w pionie za pomocą funkcji rotateY(45deg) właściwości transform. Element #dziecko został obrócony o 45 stopni w poziomie za pomocą funkcji rotateX(45deg) właściwości transform. Skoro wykonaliśmy przekształcenia 3D na elementach HTML, które znajdują się w zasięgu swojej perspektywy to wygląd tych elementów HTML, jaki utworzyła nam przeglądarka internetowa powinien być prawidłowy, czyli taki jaki oczekiwalibyśmy.

Czy jest tak naprawdę?

Spróbujmy w tym momencie obrócić elementem #rodzic tak jak miało to miejsce na animacji, która została zaprezentowana parę akapitów wyżej.

RODZIC
DZIECKO

Element #dziecko ciągle wydaje się być "przyklejony" do elementu #rodzic, mimo tego że wspomniany element #dziecko został obrócony względem poziomu o 45 stopni na podstawie perspektywy, która została utworzona dla wspomnianego elementu #dziecko.

Zobaczmy co się stanie z naszym przykładowym układem elementów HTML, gdy usuniemy perspektywę z elementu #dziecko oraz sprawimy aby perspektywa, która została utworzona dla elementu #rodzic rozszerzyła swój zasięg również na elementy dzieci danego elementu #rodzic, czyli na element #dziecko. Jak wiemy z poprzedniej części kursu CSS, aby sprawić żeby perspektywa, w której znalazł się dany element HTML rozszerzyła swój zasięg również na elementy dzieci danego elementu HTML, należy skorzystać z właściwości transform-style oraz wartości preserve-3d.

#rodzic {
  position:relative;
  width:300px;
  height:300px;
  margin:0 auto;
  background-color:rgba(255,0,0,0.5);
  color:#FFF;
  font-weight:bold;
  text-align:center;
  transform:perspective(500px) rotateY(45deg);
  transform-style:preserve-3d;
}

#dziecko {
  position:absolute;
  top:90px;
  left:90px;
  width:120px;
  height:120px;
  background-color:#000;
  transform:rotateX(45deg);
}

Rezultat:

RODZIC
DZIECKO

Od tej pory zarówno element #rodzic, jak i element #dziecko znajdują się w zasięgu jednej i tej samej perspektywy. Dzięki czemu oba elementy HTML, które zostały przekształcone za pomocą osobnych funkcji 3D właściwości transform (funkcja rotateY() dla elementu #rodzic oraz funkcja rotateX() dla elementu #dziecko) zostały przekształcone przez przeglądarkę internetową w sposób w jaki byśmy tego oczekiwali.

Animacja zaprezentowana poniżej może nam to udowodnić.

RODZIC
DZIECKO

Jak widzimy na animacji, która została zaprezentowana powyżej, wiedza którą zdobyliśmy w tej części kursu CSS może przydać się nam w momencie gdy będziemy chcieli wykonać kilka przekształceń w przestrzeni 3D na kilku elementach dzieciach danego elementu HTML, a następnie zechcemy wykonać jedno przekształcenie w przestrzeni 3D na wszystkich elementach HTML jednocześnie, np. w celu obrócenia całym układem elementów HTML. Na podstawie tej zasady w dziale czwartym utworzymy animowany sześcian 3D oraz animowaną karuzelę 3D.

A o to kolejna animacja, która tym razem obraca zarówno elementem #rodzic, jak i elementem #dziecko względem tej samej perspektywy.

RODZIC
DZIECKO

Tworzeniem animacji w przestrzeni 3D zajmiemy się w innej części tego działu, natomiast w następnej części kursu CSS dowiemy się w jaki sposób położenie punktu środka perspektywy wpływa na ostateczny wygląd elementu HTML.