CSS3 Today

Posted 06.04.2013

В этом посте речь пойдет о самых фундаментальных и в то же время весьма интересных свойствах спецификации каскадных таблиц стилей CSS3. Нововведения достаточно функциональны и просты, с их помощью можно сократить работу по написанию JavaScript кода.

Transform

Свойство transform — применяет трансформацию к элементу (можно применить несколько трансформаций, задавая значения через пробел). Элемент можно передвигать, масштабировать, поворачивать и наклонять.
Допустимые значения:

none — элемент не трансформируется
<функция> — элемент трансформируется согласно одной из следующих функций:
matrix(<число>, <число>, <число>, <число>, <число>, <число>) — определяет матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
matrix3d(<число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>, <число>) — определяет 3d матрицу, на которую будет умножена матрица, составленная из исходных координат элемента для получения новых координат
translate(<значение>) — определяет сдвиг элемента. Можно задать два сдвига, через запятую: первый по оси x, второй по оси y. Если задано только одно значение, сдвиг по оси y будет равен 0
translate3d(<значение>, <значение>, <значение>) — определяет сдвиг элемента по оси x, по оси y и по оси z
translateX(<значение>) — определяет сдвиг элемента по оси x
translateY(<значение>) — определяет сдвиг элемента по оси y
translateZ(<значение>) — определяет сдвиг элемента по оси z
scale(<число>) — определяет масштабирование элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, масштаб по оси y будет равен масштабу по оси x
scale3d(<число>, <число>, <число>) — определяет масштаб элемента по оси x, по оси y и по оси z
scaleX(<число>) — определяет масштаб элемента по оси x
scaleY(<число>) — определяет масштаб элемента по оси y
scaleZ(<число>) — определяет масштаб элемента по оси z
rotate(<угол>) — определяет поворот элемента на заданный угол относительно центра поворота, заданного свойством transform-origin
rotate3d(<число>, <число>, <число>, <угол>) — определяет поворот элемента на заданный угол по направлению вектора, заданного первыми тремя параметрами. Элементповорачиваетсяотносительноточки, заданнойсвойством transform-origin
rotateX(<число>) — определяет угол поворота элемента по оси x
rotateY(<число>) — определяет угол поворота элемента по оси y
rotateZ(<число>) — определяет угол поворота элемента по оси z
skew(<угол>) — определяет наклон элемента. Можно задать два числа через запятую: первый по оси x, второй по оси y. Если задано только одно значение, наклон по оси y будет равен 0
skewX(<угол>) — определяет угол наклона элемента по оси x.
skewY(<угол>) — определяет угол наклона элемента по оси y.
perspective(<глубина>) — расстояние в пикселях от зрителя.

Примеры использования:

box 1	Translated to the right: `-webkit-transform: translate(3em,0);`
box 2	Rotated 30 degrees with the clock: `-webkit-transform: rotate(30deg);`
box 3	Translated to the left and down slightly: `-webkit-transform: translate(-3em,1em);`
box 4	Scaled to twice its original size: `-webkit-transform: scale(2);`

#box1:hover + #box2 {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 left: 627px;
 background: yellow;
 }

Transition
Итоговая сводная таблица:

`transition-property`	Свойство, к которому применяем анимацию	Практически любое свойство CSS: color, background, width, font-size и т.д.
`transition-duration`	Длительность анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
`transition-timing-function`	Временная функция, используемая для анимации	ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
`transition-delay`	Задержка анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Animation

Для задания CSS3 анимации элементу используется CSS3 свойство animation. Это свойство — сокращенная запись различных свойств анимации:

animation-name — задает имя анимации
animation-duration — задает время проигрывания анимации
animation-timing-function — описывает метод расчета промежуточных значений свойств для анимации
animation-delay — задает задержку анимации
animation-iteration-count — задает количество циклов анимации
animation-direction — задает направление анимации
animation-play-state — определяет, проигрывается ли анимация или стоит на паузе

Эти же свойства с вендорным префиксом -webkit-:

-webkit-animation-name — задает имя анимации
-webkit-animation-duration — задает время проигрывания анимации
-webkit-animation-timing-function — описывает метод расчета промежуточных значений свойств для анимации
-webkit-animation-delay — задает задержку анимации
-webkit-animation-iteration-count — задает количество циклов анимации
-webkit-animation-direction — задает направление анимации
-webkit-animation-play-state — определяет, проигрывается ли анимация или стоит на паузе

Kayframes
Примеры использования:

[css]@-webkit-keyframesmovingbox{
from{left:90%;-webkit-transform: rotate(0deg);}
to{left:10%;-webkit-transform: rotate(360deg);}
}

@-webkit-keyframesmovingbox{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}

@-webkit-keyframes NAME-YOUR-ANIMATION {
0%{ opacity:0;}
100%{ opacity:1;}
}

@-moz-keyframes NAME-YOUR-ANIMATION {
0%{ opacity:0;}
100%{ opacity:1;}
}

@-ms-keyframes NAME-YOUR-ANIMATION {
0%{ opacity:0;}
100%{ opacity:1;}
}

#box {
-webkit-animation: NAME-YOUR-ANIMATION 5s infinite;
-moz-animation: NAME-YOUR-ANIMATION 5s infinite;
-ms-animation: NAME-YOUR-ANIMATION 5s infinite;
}[/css]

На этом на сегодня, пожалуй, все. Спасибо за внимание, надеюсь пост был полезен.

CSS3 Today

Похожие посты