Статьи

CSS3 2D и 3D Transform

Март 7, 2019

Когда я впервые столкнулся со свойством CSS3 transform, у меня был ностальгический момент, который перенес меня в те дни, когда я был студентом по информатике. Тогда одним из курсов по математике, который мне пришлось пройти, была линейная алгебра. Линейная алгебра имеет дело с векторными пространствами и линейными функциями, которые выполняют преобразования, используя векторы и матрицы. Сам курс не был таким сложным, но позже, когда я начал работать веб-разработчиком, я всегда думал, где я могу использовать эти надоедливые векторы и матрицы на веб-сайте или в приложении без каких-либо плагинов. Теперь с помощью CSS3 transform я получил ответ.

CSS3 Transform

Используя новое свойство CSS3 transform, вы можете создавать преобразования элементов и изменять форму, размер и положение элемента. Свойство transform может получить набор функций преобразования, которые могут быть скомпонованы, если вы напишите их через пробел.
Функции 2D-преобразования включают в себя:

  • translate — при заданных параметрах left и top элемент переместится из своей позиции в новую точку. Существуют также функции translateX и translateY, которые получают только один параметр и переводят элемент только по одной оси.
  • поворот — при заданной степени элемент поворачивается по часовой стрелке в соответствии с градусом. Обратите внимание, что параметр должен быть в определенном формате, например, это допустимые параметры: 60deg, 80deg и т. Д.
  • Масштаб — учитывая ширину и высоту, элемент будет увеличивать или уменьшать свой размер. Существуют также функции scaleX и scaleY, которые получают только один параметр и масштабируют элемент только по одной оси.
  • skew — при заданных параметрах x степени и y степени, элемент будет поворачиваться на заданные углы сначала по оси x, а затем по оси y. Существуют также функции skewX и skewY, которые получают только один параметр и наклоняют элемент только по одной оси.
  • matrix — при заданных шести параметрах af применить матрицу преобразования [abcdef] к элементу.

Функции 3D-преобразования включают в себя:

  • matrix3d — то же самое, что и матричная функция, но теперь получает 16 параметров.
  • translate3d — получает дополнительный параметр оси Z.
  • scale3d — получает дополнительный параметр оси Z. Существует также функция scaleZ, которая масштабирует элемент только по оси z.
  • rotate3d — получает четыре параметра — x, y и z, которые определяют вектор направления [xyz] и градус поворота в этом направлении. Существует также функция rotateZ, которая вращает элемент по оси z.

Простой пример преобразования

Использовать свойство transform просто, чтобы установить любое другое свойство CSS для элемента. Вот простой пример использования свойства transform:

<!DOCTYPE html>
<html>
<head>
    <title>Transformation Example</title>
    <style type="text/css">               
        #rotatedTriangle 
        {     
            position:absolute;
            left: 100px;
            top:100px;          
            height: 100px; 
            width: 100px;            
            background-color: Green;            
            transform: rotate(45deg) scale(2, 2);                      
        }
    </style>
</head>

<body>

    <div id="rotatedTriangle"></div>

</body>

</html>

Обратите внимание — я использую спецификации CSS-свойств. В каждом крупном браузере до тех пор, пока спецификация не станет рекомендацией, вам придется использовать префикс браузера.

Вот изображение результатов трансформации на веб-странице:
Пример преобразования

Объединение CSS3-преобразования и CSS3-анимации

В предыдущем посте я писал о CSS3-анимации и о том, как использовать ее для создания простых анимаций. Вы можете объединить знание CSS3-анимации с CSS3-преобразованием, чтобы создавать сложные анимации, встроенные в ваши веб-страницы. Давайте посмотрим на простой пример:

<!DOCTYPE html>
<html>
<head>
    <title>Transformation and Animation</title>
    <style type="text/css">
        @keyframes trans 
        {   
            from { transform: translate(0px, 0px) scale(1, 1); }               
            to { transform: translate(300px, 300px) scale(2, 2); }
        }

        #animatedDiv 
        {     
            position:absolute;
            left: 100px;
            top:100px;          
            height: 100px; 
            width: 100px;            
            background-color: Green;            
            animation: trans 5s linear 1s infinite;            
        }
    </style>
</head>

<body>
    <div id="animatedDiv"></div>
</body>

</html>

В этом примере я использую правило @keyframes, чтобы применить функцию перевода и масштабирования к элементу div, встроенному в веб-страницу. Анимация будет переводить div 300px по оси x и y, а затем масштабировать div в два раза больше его размера. Это простой пример, но он показывает концепцию использования двух модулей CSS3 для получения очень интересного результата.

Обратите внимание — я использую спецификации CSS-свойств. В каждом крупном браузере до тех пор, пока спецификация не станет рекомендацией, вам придется использовать префикс браузера.

Резюме

CSS3 transform помогает создавать преобразования элементов в 2D и 3D. Использование этого нового модуля CSS3 может помочь в создании графики и, конечно, анимации, которая могла быть достигнута в прошлом только с помощью плагинов или большого количества кода JavaScript. Не все браузеры поддерживают свойство transform, но вы можете использовать запасные варианты, чтобы реализовать его даже сегодня.

 

Источник: http://blogs.microsoft.co.il/blogs/gilf/archive/2011/12/22/css3-2d-and-3d-transform.aspx

 

33
Share: