Instrukcje - rotacja

Taki ze mnie przekrzywiony tekst.

Fajny efekt prawda? Spróbuj najechać na niego myszką. Rusza się, i to dość płynnie. Wbrew pozorom, to nie jest aż tak trudne, aby przekrzywić kawałek tekstu albo nazwisko swojej postaci. Zaprezentuję kilka sposobów na zabawę z rotacjami. Naturalnie, czcionkę zmieniamy według własnego widzimisię i według własnej potrzeby. 

<div class="tekst">
Taki ze mnie przekrzywiony tekst. </div>
<style type="text/css">
.tekst {
font-family: vladimir script; /*czcionka tekstu*/
font-size: 25px; /*rozmiar czcionki tekstu*/
text-align: center; /*wyśrodkowanie tekstu*/
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s; /*trzy powyższe linijki odpowiadają za płynne przejście*/
transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg)} /*trzy powyższe linijki odpowiadają za "przekrzywienie" tekstu*/
.tekst:hover {
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s; /*trzy powyższe linijki odpowiadają za płynne przejście po najechaniu*/
transform:rotate(-3deg);
-webkit-transform:rotate(-3deg);
-moz-transform:rotate(-3deg);
-o-transform:rotate3deg)}</style> /*trzy powyższe linijki odpowiadają za "przekrzywienie" tekstu po najechaniu*/

~ * ~

Enma Ai

<div class="tekst">
Enma Ai </div>
<style type="text/css">
.tekst {
font-family: vladimir script; /*rodzaj czcionki*/
font-size: 25px; /*rozmiar czcionki*/
text-align: center; /*wyśrodkowanie tekstu*/
text-shadow: -2px 0px 2px grey, 2px 0px 2px white; /*cień pod tekstem*/
transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg)} /*powyższe 3 linijki odpowiadają za przekrzywienie tekstu*/
</style>

~ * ~

Anastazja

<div class="tekst">
Anastazja</div>
<style type="text/css">
.tekst {
font-family: Vladimir Script; /*rodzaj czcionki*/
font-size: 23px; /*wielkość czcionki*/
text-align: center; /*wyśrodkowanie tekstu*/
transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg) /*przekrzywienie tekstu*/
}
.tekst:first-letter {
text-shadow: -2px 0px 1px #444, 2px 0px 1px #111; /*cień pod pierwszą literą tekstu*/
font-family: Kunstler Script; /*rodzaj czcionki pierwszej litery tekstu*/
font-size: 35px; /*wielkość czcionki pierwszej litery tekstu*/
}

~ * ~

Zevran Arainai

<div class="tekst">
Zevran Arainai </div>
<style type="text/css">
.tekst {
font-family: vladimir script; /*rodzaj czcionki*/
font-size: 25px; /*wielkość czionki*/
text-align: center; /*wyśrodkowanie czcionki*/
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s; /*płynne przejście*/
transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg)} /*przekrzywienie tekstu*/
.tekst:hover {
letter-spacing: 2px; /*odstęp między literami po najechaniu*/
text-shadow: 2px 2px 5px #fff; /*cień pod tekstem po najechaniu*/
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s; /*płynne przejście*/
transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg)} /*przekrzywienie po najechaniu*/</style>

~ * ~

Amy Adams

<div class="tekst">
Amy Adams </div>
<style type="text/css">
.tekst {
font-family: vladimir script; /*rodzaj czcionki*/
font-size: 25px; /*rozmiar czcionki*/
text-align: center; /*wyśrodkowanie tekstu*/
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s; } /*płynne przejście*/
.tekst:hover {
 -moz-transition:all 1s;
 -webkit-transition:all 1s;
 -o-transition:all 1s; /*płynne przejście*/
transform:rotate(3deg);
-webkit-transform:rotate(3deg);
-moz-transform:rotate(3deg);
-o-transform:rotate(3deg)} /*rotacja po najechaniu*/</style>