Wpis na blogu
by: Aurelia SypniewskaPosted on:

Animowana karta / obrazek w przestrzeni 3D – CSS

Czas czytania: 2 minut

Dzisiaj pokażę wam ciekawy efekt, który jakiś czas temu zobaczyłam na innej stronie. Chodzi mi o prosty efekt polegający na obrocie obrazka.

See the Pen Flipped card by Aura (@Julka85) on CodePen.

Naszym przykładem tym razem będzie obracająca się po najechaniu kursorem myszy (efekt :hover) grafika z której zrobimy coś w rodzaju obracającej się kartki / pocztówki. Efekt jest dość ciekawy i co najciekawsze daje nam na stronie coś w rodzaju efektu w 3D. Oczywiście jest to tylko złudzenie będące wynikiem odpowiedniej manipulacji obiektami na stronie internetowej.

Prosta animacja zdjęcia

Efekt, który chce dziś pokazać jest bardzo prosty do uzyskania. Oparty będzie tylko o HTML i CSS.

Tworzenie animacji zaczniemy od budowy prostego kontenera. Jak widać poniżej nie umieszczam bezpośrednio w kodzie HTML obrazka – zostanie on dodany w późniejszym etapie jako tło warstwy z pomocą CSS.

<body> 
  <div id="pudelko"> 
    <div id="karta">KARTA</div> 
  </div> 
</body>

Teraz kiedy posiadamy już nasz kontener i jego zawartość kolej na CSS. Na początek dodamy style do #pudełko i #karta.

#pudelko { 
width: 150px; 
height: 113px; 
margin: 0 auto; 
border: 3px dashed #000; 
background-color: #FDD700; 
perspective: 300px; 
} 

#karta { 
width: 100%; 
height: 100%; 
background-color: #EEE; 
text-align: center; 
}

W tym kodzie nie ma nic niezwykłego dla stworzenia naszego efektu będziemy musieli wprowadzić drobne zmiany.

Modyfikujemy więc nasz kod dodając do niego możliwość obrotu poprzez odpowiednią formułę CSS3.

#karta { 
width: 100%; 
height: 100%; 
text-align: center; 
background-color: #EEE; 
transition: 1s; 
} 

#pudelko:hover > #karta 
{ 
transform: rotateY(180deg); 
}

Na chwilę wracamy do naszego kodu HTML, tu Ciemierów wprowadzamy kilka zmian. Dodajemy przód i tył naszej karty (wierzch i spód).

<body> 
<div id="pudelko"> 
<div id="karta"> 
<div id="przod">Przód karty</div> 
<div id="tyl">Tekst na tyle</div> 
</div> 
</div> 
</body>

Teraz musimy ustawić #przod i #tył w tym samym miejscu tak by mogły się wzajemnie zastępować.

Do elementu #karta musimy w tym celu dodać właściwość

position: relative;

I oczywiście napisać ustawienia dla #przod i #tył

#przod { 
position: absolute; 
width: 100%; 
height: 60%; 
color: #F00; 
font-size: 1.6em; 
background: url('https://aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg') no-repeat; 
background-size:100%; 
} 
#tyl { 
position: absolute; 
width: 50%; 
height: 30%; 
color: #FFF; 
font-size: 1.6em; 
background-color: #000; 
}

Dodanie właściwości position:relative do #karta sprawi, że wszystkie elementy z position: absolute będą ograniczone do rozmiarów tego obiektu.

W tej chwili jeszcze nie mamy dobrze obracającej się kartki dlatego modyfikujemy kod:

#tyl { 
position:absolute; 
width:50%; height:30%; 
color:#FFF; 
font-size:1.6em; 
background-color:#000; 
transform:rotateY(180deg); 
}

Wszystko jest już prawie gotowe, ale dodamy jeszcze tylko kilka ozdobników:

 #przod {
 position:absolute;
 width:100%;
 height:100%;
 background:url('https://aurainweb.pl/wp-content/uploads/2012/11/ID-10082124-m.jpg') no-repeat;
 background-size:100%;
 box-shadow:0 0 4px 8px #FFF inset;
 backface-visibility:hidden;
 -webkit-backface-visibility:hidden;
 }

 #tyl {
 position:absolute;
 width:100%;
 height:100%;
 line-height:113px;
 color:#FFF;
 font-size:1.6em;
 background-color:#000;
 box-shadow:0 0 4px 8px #FFF inset;
 transform:rotateY(180deg);
 -webkit-transform:rotateY(180deg);
 backface-visibility:hidden;
 -webkit-backface-visibility:hidden;
 }

Gotowy efekt:

See the Pen Flipped card by Aura (@Julka85) on CodePen.

Źródło:
http://webkod.pl/kurs-css/lekcje/dzial-4/css3-animowana-karta-3d

dodatkowe tagi:

Flipping, Flipped with css