CSS New CSS 3 features part 2

CSS New CSS 3 features – part 2 Новые свойства CSS 3 – часть 2

CSS переходы transform* (трансформация, включает в себя целую группу преобразований): rotate (поворот) scale (масштаб) skew (скос) translate (смещение) matrix (матрица) * на текущий момент времени (апрель 2012 г. ) указание префикса для каждого движка является обязательным.

CSS трансформации: поворот transform: rotate element { … /* исходное значение – 0 deg */ transform: rotate(20 deg); -moz-transform: rotate(20 deg); -webkit-transform: rotate(20 deg); -o-transform: rotate(20 deg); -ms-transform: rotate(20 deg); }

CSS трансформации: масштаб transform: scale element { … /* исходный масштаб – 1. 0, 1. 0 */ transform: scale(1. 4, 0. 5); -moz-transform: scale(1. 4, 0. 5); -webkit-transform: scale(1. 4, 0. 5); -o-transform: scale(1. 4, 0. 5); -ms-transform: scale(1. 4, 0. 5); }

CSS трансформации: скос transform: skew element { … /* исходный скос – 0 deg, 0 deg */ transform: skew(-40 deg, 9 deg); -moz-transform: skew(-40 deg, 9 deg); -webkit-transform: skew(-40 deg, 9 deg); -o-transform: skew(-40 deg, 9 deg); -ms-transform: skew(-40 deg, 9 deg); }

CSS трансформации: смещение transform: translate element { … /* исходное смещение – 0 px, 0 px */ transform: translate(100 px, 50 px); -moz-transform: translate(100 px, 50 px); -webkit-transform: translate(100 px, 50 px); -o-transform: translate(100 px, 50 px); -ms-transform: translate(100 px, 50 px); }

CSS трансформации: матрица transform: matrix element { … /* исходные значения – 1, 0, 0, 1, 0, 0 */ transform: matrix(1. 2, 0. 1, 0. 2, 0. 9, 0, 0); -moz-transform: matrix(1. 2, 0. 1, 0. 2, 0. 9, 0, 0); -webkit-transform: matrix(1. 2, 0. 1, 0. 2, 0. 9, 0, 0); -o-transform: matrix(1. 2, 0. 1, 0. 2, 0. 9, 0, 0); -ms-transform: matrix(1. 2, 0. 1, 0. 2, 0. 9, 0, 0); }

CSS трансформации: матрица Параметры преобразования transform: matrix(1. 2, 0. 1, 0. 2, 0. 9, 0, 0); Растягивание по горизонтали Смещение по вертикали Растягивание по вертикали Смещение по Скос по горизонтали Скос по вертикали

CSS трансформации: матрица Параметры аналогичного преобразования в Internet Explorer 5. 5 — 8. 0 filter: progid: DXImage. Transform. Microsoft. Matrix( Растягивание по горизонтали M 11=1. 0 Скос по горизонтали M 12=0. 0 Скос по вертикали M 21=0. 0 Растягивание по вертикали M 22=1. 0 Sizing. Method="auto expand"); Автоматическое растягивание габаритного контейнера элемента

CSS - точка привязки transform-origin (может иметь одно или два значения: по горизонтали, по вертикали) cловесное (top | bottom | left | right | center) значение в процентах (0 -100%) численное значение в единицах измерения (1 cm, 10 px, 0. 5 em, 16 pt, …) div { transform-origin: center 5%; }