CSS3 - transform

CSS3 - transform-origin
Dodał pwimmer
wtorek, 22 luty 2011 11:37
div.rotatecenter { width:100px; height:50px; background-color: olive; } div.rotatetopleft { width:100px;
height:50px; background-color: olive; } div.skewright { width:100px; height:50px; background-color: khaki; }
div.skewleftbottom { width:100px; height:50px; background-color: khaki; } div.scalebottom { width:100px;
height:50px; background-color: gainsboro; } div.scalecenter { width:100px; height:50px; background-color:
gainsboro; }
div.rotatecenter:hover { -webkit-transition: linear 2s; -webkit-transform-origin:center;
-webkit-transform:rotate(30deg); -o-transition: linear 2s; -o-transform-origin:center; -o-transform:rotate(30deg);
-moz-transition: linear 2s; -moz-transform-origin:center; -moz-transform:rotate(30deg); transition: linear 2s;
transform-origin:center; transform:rotate(30deg); } div.rotatetopleft:hover { -moz-transition: linear 2s;
-moz-transform-origin:top left; -moz-transform:rotate(30deg); -webkit-transition: linear 2s;
-webkit-transform-origin:top left; -webkit-transform:rotate(30deg); -o-transition: linear 2s; -o-transform-origin:top
left; -o-transform:rotate(30deg); transition: linear 2s; transform-origin:top left; transform:rotate(30deg); }
div.skewright:hover { -moz-transition: linear 2s; -moz-transform-origin:right; -moz-transform:skew(30deg);
-webkit-transition: linear 2s; -webkit-transform-origin:right; -webkit-transform:skew(30deg); -o-transition: linear 2s;
-o-transform-origin:right; -o-transform:skew(30deg); transition: linear 2s; transform-origin:right;
transform:skew(30deg); } div.skewleftbottom:hover { -moz-transition: linear 2s; -moz-transform-origin:bottom
left; -moz-transform:skew(30deg); -webkit-transition: linear 2s; -webkit-transform-origin:bottom left;
-webkit-transform:skew(30deg); -o-transition: linear 2s; -o-transform-origin:bottom left;
-o-transform:skew(30deg); transition: linear 2s; transform-origin:bottom left; transform:skew(30deg); }
div.scalebottom:hover { -moz-transition: linear 2s; -moz-transform-origin:bottom; -moz-transform:scale(1.5);
-webkit-transition: linear 2s; -webkit-transform-origin:bottom; -webkit-transform:scale(1.5); -o-transition: linear 2s;
-o-transform-origin:bottom; -o-transform:scale(1.5); transition: linear 2s; transform-origin:bottom;
transform:scale(1.5); } div.scalecenter:hover { -moz-transition: linear 2s; -moz-transform-origin:center;
-moz-transform:scale(1.5); -webkit-transition: linear 2s; -webkit-transform-origin:center;
-webkit-transform:scale(1.5); -o-transition: linear 2s; -o-transform-origin:center; -o-transform:scale(1.5);
transition: linear 2s; transform-origin:center; transform:scale(1.5); }
Tematy: transform : translate | transform : translate3d | transform : rotate | transform : rotate3d | transform : scale |
transform : scale3d | transform : skew | transform : matrix | transform : matrix3d | transform-origin | transform-style
| perspective | perspective-origin | backface-visibility
Dane w pigułce
Zastosowanie
Ustala punkt początkowy, od którego następuje transformacja
Dziedziczenie
nie
Wartości
left center right długość procent | top center bottom długość procent
Wartość domyślna
50% 50%
Przykład
transform-origin: top left
Składnia JavaScript
object
.style.transformOrigin="top left"
Aby zdefiniować punkt początkowy transformacji, należy wpisać w definicji stylu transform-origin:wartość.
Żadna z przeglądarek nie obsługuje czystego kodu, Firefox wymaga użycia prefiksu -moz-, Chrome i Safari
prefiksu -webkit-, natomiast Opera - prefiksu -o-.
Polecenie transform-origin służy do ustalenia punktu, wokół którego następuje transformacja, np. obrót, skalowanie
czy pochylenie. Przykładowo, skalowanie następuje domyślnie od punktu początkowego, jakim jest środek
pojemnika, ale za punkt początkowy przekształcenia możemy przyjąć prawy górny róg pojemnika czy środek
dolnego brzegu. Obrót następuje domyślnie od środka pojemnika, ale możemy wybrać inne miejsce, np. prawy
górny róg.
Dostępne wartości:
Dla osi X - left (lewy brzeg), center (środek), right (prawy brzeg), procent długości od lewej strony, odległość w
pikselach od lewej strony.
Dla osi Y - top (górny brzeg), center (środek), bottom (dolny brzeg), procent długości od góry, odległość w
pikselach od góry.
1/2
CSS3 - transform-origin
Dodał pwimmer
wtorek, 22 luty 2011 11:37
Podając top left wyznaczamy lewy górny róg, bottom wyznacza środek dolnego brzegu, bottom right wyznacza
prawy dolny róg, 30% 30% wyznacza punkt w odległości 30% o lewego i od górnego brzegu pojemnika.
Poniżej prezentujemy przykłady. Statyczne ilustracje pokazują wynik przemiany za pomocą obrotu, pochylenia i
skalowania, natomiast przykłady dynamiczne (z wykorzystaniem transition) ilustrują przemiany po przesunięciu
kursora myszki nad pojemnik. Obrót od środka pojemnika (center):
Przyklad statyczny: Przykład dynamiczny (przesuń kursor myszki nad pojemnik): pojemnika (top left):
Obrót od lewego górnego rogu
Przyklad statyczny: Przykład dynamiczny (przesuń kursor myszki nad pojemnik): pojemnika (right):
Pochylenie od środka prawego brzegu
Przykład statyczny: Przykład dynamiczny (przesuń kursor myszki nad pojemnik): pojemnika (bottom left):
Pochylenie od lewego dolnego rogu
Przykład statyczny: Przykład dynamiczny (przesuń kursor myszki nad pojemnik): pojemnika (bottom):
Skalowanie od środka dolnego brzegu
Przykład statyczny: Przykład dynamiczny (przesuń kursor myszki nad pojemnik): (center):
Skalowanie od środka pojemnika
Przykład statyczny: Przykład dynamiczny (przesuń kursor myszki nad pojemnik): Interpretacja: Firefox (z prefiksem), Chrome (z prefiksem), Opera (z prefiksem).
2/2