C-Forum.pl :: Twoje Forum Webmasterskie
Tutorial Obracające awatary - Wersja do druku

+- C-Forum.pl :: Twoje Forum Webmasterskie (http://c-forum.pl)
+-- Dział: Silniki (/Forum-Silniki)
+--- Dział: MyBB (/Forum-MyBB)
+---- Dział: MyBB Support (/Forum-MyBB-Support)
+---- Wątek: Tutorial Obracające awatary (/Thread-Tutoriale-Obracaj%C4%85ce-awatary)



Obracające awatary - Serent - 24-02-2014 12:15

Przejdź do ACP -> Style i szablony -> Style -> Twój_styl -> global.css -> Tryb zaawansowany

Na sam dół wklej ten kod i zapisz.

Kod:
<style text="text/css"> 
.obrot{background-image: ;border-radius: 100px;height:100px;width:100px;} 
.obrot:hover{background-image: ;opacity:1;-webkit-transform: rotate(-360deg);-moz-transform: rotate(-360deg);transition: 2s;-moz-transition: 2s;-o-transition: 2s;-htm-transition: 2s;-webkit-transition: 2s;border-color:#1fb6c7;}</style> 
<div class="obrot"></div>

Jest to kod css, więc ten sposób zadziała również na innych silnikach, takich jak ipb, czy phpbb.



Teraz jeżeli przy widoku posta było to widoczne wejdź:

ACP -> Style i szablony -> Szablony -> Twój_szablon -> Opis posta -> postbit_avatar

Usuń wszystko i wklej to:

Kod:
<a href="{$post['profilelink_plain']}"><img src="{$post['avatar']}" alt="" {$avatar_width_height} class='obrot' /></a>

Jeśli chcesz zmienić prędkość obrotu zmieniasz te wartości

Kod:
transition: 2s;-moz-transition: 2s;-o-transition: 2s;-htm-transition: 2s;-webkit-transition: 2s;

Na na przykład 1s(należy zmienić wszystkie wartości, aby działało)



Jeżeli liczbę obrotów zmień te wartości

Kod:
rotate(-360deg);-moz-transform: rotate(-360deg)

Np. na -720deg to wtedy avatar zrobi dwa obroty. -(minus) przed wartością oznacza, że avatar będzie kręcić się w lewo, jeżeli chcesz, aby kręcił się w prawo wpisz samą wartość.


RE: Obracające awatary - Song - 24-02-2014 15:39

dzięki wszystko działa jak należy.