Как использовать трансфорамции CSS3

CSS развился относительно в короткие сроки, и его развитие было экспоненциальным. (Экспоненциальный рост — возрастание величины, когда скорость роста пропорциональна значению самой величины). Из языка, который начался с простого выбора стиля, превратился в сложный сложный способ предоставления содержания на странице.  У CSS3 есть много удивительных особенностей, и один из ключевых аспектов — способность изменить элемент, используя трансформации CSS.

 

Поддержка браузера

         Поддержка браузерами актуальных трансформаций CSS довольно обширна. 2D трансформацию поддерживают все основные браузеры, включая IE9 и выше. 3D трансформацию поддерживают все современные браузеры, включая IE10 и выше. Даже мобильные браузеры (за исключением Opera Mini) поддерживают трансформации.

Однако примите во внимание, что IE10 не поддерживает свойство preserve-3d, которое предотвращает вложенные элементы 3D трансформации. Местами вы будете использовать webkit и ms- prefixes, о которых поговорим дальше.

 

Свойства

         CSS3 дает множество свойств по умолчанию. Есть выбор для того чтобы сделать ваш элемент в 2D или 3D. Можно объединить два свойства и более, для того чтобы создать более сложный эффект.

Начнем со свойств 2D

         matrix(x,x,x,x,x,x,x): Используя матрицу вы можете определить 2D трансформацию, используя 6 чисел

         translate(x,y): Здесь Вы можете определить, как Вы хотите перемещать элемент в 2D пространстве, используя координаты y и x. Так же можно использовать свойства трансформации для перемещения только по y или x, используя translateY или translateX соответственно.

scale (x, y): scale не нуждается ни в каких представлениях. Функция scale принимает два параметра: значение X для горизонтального масштабирования и значение Y — для вертикального. Вы выбираете на сколько Вы хотите трансформировать элемент, значения x, y могут быть непропорциональны.  Как  в translate у Вас также есть scaleX и scaleY, если Вы хотите изменить только в одной координате.

         rotate(angle): Используя свойство rotate, вы можете вращать элемент в 2D углом который вы зададите.

skew(x-angle,y-angle): Здесь вы можете определить искажение трансформации, используя угол y и x. Как у scale и translate здесь так же есть опция использования одного угла, применяя skewX или skewY свойства.

Как вы можете видеть выше представлено много функций для работы в 2D и их использование довольно просто.  Например использование свойства вращения

element {
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
}

Используя эти две простых строки Вы можете воссоздать любой из эффектов в списке выше.

Этот список был частью всего доступного преобразования 2D. Больше опций могут использоваться для преобразования элементов, но эти элементы будут использованы в 3D.

matrix3d (x, x, x, x, x, x, x, x, x, x, x, x, x, x, x, x): Работает точно так же, как 2D матрица, но в этой особой матрице Вы используете комбинацию 16 чисел для достижения эффекта.

translate3d (x, y, z): Используя это свойство Вы можете перевести элемент использующий значения x, y и z. Если Вы хотите использовать значение только z, Вы можете использовать свойство translateZ

scale3D (x, y, z): работает подобно scale2D, но добавляется значение z для большей гибкости. Также есть возможность использования scaleZ, для изменения значения только для Оси Z.

rotate3d (x, y, z, угол): Работает так же как и rotate3d, но в 3D. Возможен выбор rotateX, rotateY и rotateZ.

         perspective(x): Здесь вы определяете вид на элемент в перспективе.

Как Вы видите, есть много опций которые дошли до трансформации в 3D, и когда дело доходит до использования они работают по такому же принципу, как 2D. Вот все что вам нужно для масштабирования в 3D:

element {
transform:scale(1.5,1.5,2);
-webkit-transform:scale(1.5,1.5,2);
}

Использование:

         Итак, мы рассмотрели какие свойства есть в нашем распоряжении, как мы можем получить основу из них. Пора изучить, как создать более интересные эффекты, и большинство создания этих эффектов подразумевает, что Вы должны будете использовать несколько свойств на одном элементе. Вы можете одновременно использовать 2D и 3D, если например вы хотите вращать в 2D и масштабировать в 3D один элемент, все что вам потребуется:

element {
transform: rotate(180deg) scale3d(1.5,1.5,2);
-webkit-transform: rotate(180deg) scale3d(1.5,1.5,2);
}

Как вы видите, довольно просто наложить трансформации друг на друга. Все что вам нужно — это пространство между каждым свойством, которое Вы используете и следующем в Вашем списке. Это означает, что Вы можете использовать одно свойство или 5, чтобы преобразовать Ваш элемент, все это зависит от того, на сколько сложный эффект Вы хотели бы достичь.

Одна милая особенность, которая также шла с преобразованиями — это то, что они могут легко использоваться с CSS Transitions, для создания сложной анимации. Если вы хотите анимировать какой-то элемент hover-эффектом, вы просто должны сделать нормальный синтаксис перехода с преобразованием при наведении, примерно так:

element {
transition: all 0.5 ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
}
element:hover {
transform: rotate(360deg) scale3d(1.5,1.5,2);
-webkit-transform: rotate(360deg) scale3d(1.5,1.5,2);
}

Если вы проверите это в вашем браузере, вы увидите, что он создает анимацию для выделенного состояния в чистом CSS и все, что мы сделали, это добавили синтаксис перехода в элементе. Делать больше ничего не нужно, синтаксис CSS для преобразования довольно прост. Также просто вставить анимации для работы на любом сайте.

Заключение

         Поскольку Вы видите, что CSS трансформации имеют много возможностей, разрешающих вам создать практически любой эффект анимации, который вы хотите видеть на своем элементе с поддержкой основными браузерами. Это серьезная альтернатива для использования анимации. CSS3 ввел большие достижения, которые могут быть очень полезными при использовании его для анимации вместо JavaScript или flash. Я надеюсь, что Вы протестируете анимации самостоятельно и будете использовать их в Ваших проектах в будущем.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *