CSS3 Today

В этом посте речь пойдет о самых фундаментальных и в то же время весьма интересных свойствах спецификации каскадных таблиц стилей 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
Примеры использования:

@-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;
}

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

Поделиться!
Tags: , , , , ,

49.69MB | MySQL:52 | 0,311sec