Wpis na blogu
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.
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
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…