Fotografie jako "Flip" 3D w CSS3
Jedną z przełomowych funkcji w CSS3 jest możliwość obracania elementów HTML w przestrzeni 3D. Poniżej kod css pokazuje jak obracać 2-stronnie element na jego osi X lub Y aby odsłonić zawartość na tylnej stronie. Wystarczy przesunąć kursor myszy na element aby obrucić go. Kod działa pod większością przeglądarek.
do pliku STYLE:
<style> div.flip{ div.flip div.rotate{ div.flip div.rotate > *{ /* Target all children elements */ div.flip div.rotate > div{ /* Target all child DIVs */ div.rotate.x *:nth-child(2){ /* X Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the X axis */ div.flip:hover > div.rotate.x{ /* X Axis rotate specific CSS. Rotate div.rotate.x when mouse rolls over container */ div.rotate.y *:nth-child(2){ /* Y Axis rotate specific CSS. Rotate 2nd child DIV 180deg in the Y axis so it mirrors the first */ div.flip:hover > div.rotate.y{ /* Y Axis rotate specific CSS. Rotate div.rotate.y when mouse rolls over container */ </style> |
W pliku HTML
<div class="flip" style="display: inline-block; margin-right: 40px"> <img src="media/desert.jpg">
<div> </div> <div class="flip" style="width: 250px; height: 200px; display: inline-block;"> <img src="media/winter.jpg"> <img src="media/coconut.jpg"> </div> |