CSS3 - Wspólna perspektywa elementów HTML w praktyce
- Data publikacji
- Ostatnio edytowano
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:
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:
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ść.
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.
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:
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.
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:
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ć.
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.
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.