Box gedreht um 2 Grad
.box {
-webkit-transform: rotate(2deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(2deg); /* FF3.5+ */
-o-transform: rotate(2deg); /* Opera */
transform: rotate(2deg);
}
Box gedreht um -2 Grad
.box {
-webkit-transform: rotate(-2deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(-2deg); /* FF3.5+ */
-o-transform: rotate(-2deg); /* Opera */
transform: rotate(-2deg);
}
Drehende Icons: Dauer 0,5 Sekunden
img.icon {
-webkit-transition: -webkit-transform 0.5s ease-out; /* Saf3.1+, Chrome */
-moz-transition: -moz-transform 0.5s ease-out; /* FF3.5+ */
-o-transition: -o-transform 0.5s ease-out; /* Opera */
transition: transform 0.5s ease-out;
}
img.icon:hover {
-webkit-transform: rotate(360deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(360deg); /* FF3.5+ */
-o-transform: rotate(360deg); /* Opera */
transform: rotate(360deg);
}
Drehende Icons: Dauer 1 Sekunde
img.icon {
-webkit-transition: -webkit-transform 1s ease-out; /* Saf3.1+, Chrome */
-moz-transition: -moz-transform 1s ease-out; /* FF3.5+ */
-o-transition: -o-transform 1s ease-out; /* Opera */
transition: transform 1s ease-out;
}
img.icon:hover {
-webkit-transform: rotate(360deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(360deg); /* FF3.5+ */
-o-transform: rotate(360deg); /* Opera */
transform: rotate(360deg);
}
Drehende Icons: Doppelte Drehung (720 Grad, 2 Sekunden)
img.icon {
-webkit-transition: -webkit-transform 2s ease-out; /* Saf3.1+, Chrome */
-moz-transition: -moz-transform 2s ease-out; /* FF3.5+ */
-o-transition: -o-transform 2s ease-out; /* Opera */
transition: transform 2s ease-out;
}
img.icon:hover {
-webkit-transform: rotate(720deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(720deg); /* FF3.5+ */
-o-transform: rotate(720deg); /* Opera */
transform: rotate(720deg);
}
Drehende Icons: 10-fache Drehung (3600 Grad, 10 Sekunden)
img.icon {
-webkit-transition: -webkit-transform 10s ease-out; /* Saf3.1+, Chrome */
-moz-transition: -moz-transform 10s ease-out; /* FF3.5+ */
-o-transition: -o-transform 10s ease-out; /* Opera */
transition: transform 10s ease-out;
}
img.icon:hover {
-webkit-transform: rotate(3600deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(3600deg); /* FF3.5+ */
-o-transform: rotate(3600deg); /* Opera */
transform: rotate(3600deg);
}
Drehende Icons: Andere Richtung
img.icon {
-webkit-transition: -webkit-transform 0.5s ease-out; /* Saf3.1+, Chrome */
-moz-transition: -moz-transform 0.5s ease-out; /* FF3.5+ */
-o-transition: -o-transform 0.5s ease-out; /* Opera */
transition: transform 0.5s ease-out;
}
img.icon:hover {
-webkit-transform: rotate(-360deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(-360deg); /* FF3.5+ */
-o-transform: rotate(-360deg); /* Opera */
transform: rotate(-360deg);
}
Text vertikal ausgerichtet
Vertikaler Text
.text {
font-size:42px;
font-weight:bold;
margin:20px auto;
padding:150px 0;
-webkit-transform: rotate(90deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(90deg); /* FF3.5+ */
-o-transform: rotate(90deg); /* Opera */
transform: rotate(90deg);
}
Und andersrum
Vertikaler Text
.text {
font-size:42px;
font-weight:bold;
margin:20px auto;
padding:150px 0;
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(-90deg); /* FF3.5+ */
-o-transform: rotate(-90deg); /* Opera */
transform: rotate(-90deg);
}
Noch was lustiges (erstellt mit RSS-Icon (32 x 32 Pixel) als Background-Image)
.box {
background: url(bild.png) 32px 0px no-repeat orange;
width:64px;
height:64px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition: -webkit-transform 2s, box-shadow 2s ease-out; /* Saf3.1+, Chrome */
-moz-transition: -moz-transform 2s, -moz-box-shadow 2s ease-out; /* FF3.5+ */
-o-transition: -o-transform 2s, box-shadow 2s ease-out; /* Opera */
transition: transform 2s, box-shadow 2s ease-out;
}
.box:hover {
-webkit-transform: rotate(720deg); /* Saf3.1+, Chrome */
-moz-transform: rotate(720deg); /* FF3.5+ */
-o-transform: rotate(720deg); /* Opera */
transform: rotate(720deg);
box-shadow: inset 2px 2px 5px #666;
}