Repozytorium Web Developera

Transformacje i animacje

transform-origin

			transform-origin: 20% 20%;
		

Podstawowe moduły 2D translate

scale
wykorzystywana do skalowania elementu (jego powiększania i zmniejszania)
				transform: scale(0.5);
			
translate
przemieszcza element na ekranie (przyjmuje np. parametry down, left i right)
				transform: translate(40px, 0px);
			
rotate
obraca elementy o określoną liczbę stopni
				transform: rotate(90deg);
			
skew
przekrzywia element w oparciu o współrzędne X i Y
				transform: skew(10deg, 2deg);
				transform: skew(10deg);
			
matrix
pozwala Ci na przemieszczanie i zmianę kształtu elementu z dokładnością co do piksela
				transform: matrix(1.678, -0.256, 1.522, 2.333, -51.533, -1.989);
			

Podstawowe moduły 3D translate

Do uzupełnienia

Sekcja do uzupełnienia.

Animacje

W3C Standards

W3C - CSS3 Animations

@keyframes

		@keyframes warning {
			0% {
				text-shadow: 0px 0px 4px #FFFF0A;
			}
			50% {
				text-shadow: 0 0 20px #FFFF0A;
			}
			100% {
				text-shadow: 0px 0px 4px #FFFF0A;
			}
		}
		
		x {
			animation: warning 1.5s infinite ease-in;
		}