Witam!
Dopiero zaczynam zabawę z CSS3 na przykładzie własnego portfolio i niestety już pojawił się drobny problem, którego nie potrafię przeskoczyć. Mam na stronie div z obrazkiem, któremu przypisałem w stylach delikatne transformacje. Wyczytałem, że aby działały one także pod innymi przeglądarkami (w Chrome wszystko działa jak należy) trzeba dodać dodatkowe polecenia - mam kod jak poniżej:
@-webkit-keyframes pulse {
from {
-webkit-transform: scale(1.0);
opacity: 1.0;
}
50% {
-moz-transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
-webkit-transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
-o-transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
-ms-transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
transform: scale(0.95) rotate(1deg) translateX(-1px) translateY(1px);
opacity: 1.0;
}
to {
-webkit-transform: scale(1.0);
opacity: 1.0;
}
}
.pulse {
opacity: 1;
-webkit-animation-name: pulse;
-webkit-animation-duration: 10s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: pulse;
-moz-animation-duration: 10s;
-moz-animation-iteration-count: infinite;
}
Niestety animacja działa tylko w Chromie, ani w Firefoxie ani w nowszym IE obrazek się nie rusza. Być może jest tu jakiś błąd, którego nie widzę, dlatego proszę o pomoc kogoś z większym doświadczeniem w tej kwestii
Przy okazji chciałem jeszcze spytać o jedną rzecz. Na stronie http://galaxy.fili.nl/ jest taki myk, że jak ruszamy myszką to delikatnie przesuwają się warstwy z obrazkami tworząc wrażenie dwuwymiarowej sceny (nie bardzo wiem jak to opisać, trzeba zobaczyć). Przyznam, że szukałem jakichś tutoriali na ten temat, ale nic sensownego mi nie wpadło w ręce, nawet nie bardzo wiem jakimi frazami się posługiwać, jakie polecenia odpowiadają za te efekty itepe. Również prosiłbym o jakieś naprowadzenie.
Z góry dzięki za pomoc!