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('http://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('http://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