Трансформации в CSS

Оцените материал
(0 голосов)

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

 

Вращение

Для поворота элемента свойство transform использует функцию rotate:

transform: rotate(угол_поворота deg);

После слова rotate в скобках идет величина угла поворота в градусах. Например, повернем блок на 30 градусов:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
        <style>
            div{
                background-color: #ccc;
                width: 120px;
                height: 120px;
                margin:5px;
                padding: 40px 10px;
                box-sizing: border-box;
                border: 1px solid #333;
                display: inline-block;
            }
            .rotated{
                transform: rotate(30deg);
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="rotated">rotate(30deg)</div>
        <div></div>
    </body>
</html>

Просмотреть  пример

При этом следует отметить, что при повороте вращаемый элемент может накладываться на соседние элементы, так как сначала происходит установка положения элементов и только затем поворот. Угол поворота может представлять как положительное, так и отрицательное значение. В случие отрицательного значения поворот производится в противоположную сторону.

Масштабирование

Применение масштабирования имеет следующую форму:

transform: scale(величина_масштабирования);

Используем маштабирование:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
        <style>
            div{
                background-color: #ccc;
                width: 120px;
                height: 120px;
                margin:5px;
                padding: 40px 10px;
                box-sizing: border-box;
                border: 1px solid #333;
                display: inline-block;
            }
            .halfScale{
                transform: scale(0.5);
            }
            .doubleScale{
                transform: scale(2);
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="doubleScale">scale(2)</div>
        <div></div>
        <div class="halfScale">scale(0.5)</div>
    </body>
</html>

Просмотреть  пример

Значение больше 1 приводит к растяжению по вертикали и горизонтали, а меньше 1 - к сжатию. То есть значение 0.5 приводит к уменьшению в два раза, а значение 1.5 - к увеличению в полтора раза.

Можно также задать величины масштабирования отдельно для вертикали и горизонтали:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
        <style>
            div{
                background-color: #ccc;
                width: 120px;
                height: 120px;
                margin:5px;
                padding: 40px 10px;
                box-sizing: border-box;
                border: 1px solid #333;
                display: inline-block;
            }
            .scale1{
                transform: scale(2, 0.5);
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="scale1">scale(2, 0.5)</div>
        <div></div>
    </body>
</html>

Просмотреть  пример

В данном случае по горизонтали будет идти масштабирование в 2 раза, а по вертикали - в 0.5 раз.

Также можно по отдельности задать параметры масштабирования: функция scaleX() задает изменение по горизонтали, а scaleY() - по вертикали. Например:

.scale1{
    transform: scaleX(2);
}

Используя отрицательные значения, можно создать эффект зеркального отражения:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
        <style>
            div{
                background-color: #ccc;
                width: 120px;
                height: 120px;
                margin:5px;
                padding: 40px 10px;
                box-sizing: border-box;
                border: 1px solid #333;
                display: inline-block;
            }
            .scale1{
                transform: scaleX(-1);
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="scale1">scaleX(-1)</div>
        <div></div>
    </body>
</html>

Просмотреть  пример

Перемещение

Для перемещения элемента используется функция translate:

transform: translate(offset_X, offset_Y);

Значение offset_X указывает, на сколько элемент смещается по горизонтали, а offset_Y - по вертикали.

К примеру, сместим блок на 30 пикселей вниз и на 50 пикселей вправо:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
        <style>
            div{
                background-color: #ccc;
                width: 120px;
                height: 120px;
                margin:5px;
                padding: 40px 10px;
                 
                box-sizing: border-box;
                border: 1px solid #333;
                display: inline-block;
            }
            .translated{
                transform: translate(50px, 30px);
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="translated"></div>
        <div></div>
    </body>
</html>

Просмотреть  пример

В качестве единиц измерения смещения можно применять не только пиксели, но и любые другие единицы измерения длины в CSS - em, % и тд.

С помощью дополнительных функций можно отдельно применять смещения к горизонтали или вертикали: translateX() (перемещение по горизонтали) и translateY() (перемещение по вертикали). Например:

transform: translateX(30px);

Кроме положительных значений также можно использовать и отрицательные - они перемещают элемент в противоположную сторону:

transform: translateY(-2.5em);

Наклон

Для наклона элемента применяется функция skew():

transform: skew(X, Y);

Первый параметр указывает, на сколько градусов наклонять элемент по оси X, а второй - значение наклона по оси Y.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
        <style>
            div{
                background-color: #ccc;
                width: 120px;
                height: 120px;
                margin:5px;
                padding: 40px 10px;
                 
                box-sizing: border-box;
                border: 1px solid #333;
                display: inline-block;
            }
            .skewed{
                transform: skew(30deg, 10deg);
                background-color:red;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div class="skewed"></div>
        <div></div>
    </body>
</html>

Просмотреть  пример

Для создания наклона только по одной оси для другой оси надо использовать значение 0. Например, наклон на 45 градусов по оси X:

transform: skew(45deg, 0);

Или наклон на 45 градусов только по оси Y:

transform: skew(0,45deg);

Для создания наклона отдельно по оси X и по оси Y в CSS есть специальные функции: skewX() и skewY() соответственно.

transform: skewX(45deg);

Также можно передавать отрицательные значения. Тогда наклон будет осуществляться в противоположную сторону:

transform: skewX(-30deg);

Комбинирование преобразований

Если нам надо применить к элементу сразу несколько преобразований, скажем, вращаение и перемещение, то мы можем их комбинировать. Например, применение всех четырех преобразований:

transform: translate(50px, 100px) skew(30deg, 10deg) scale(1.5) rotate(90deg);

Браузер применяет все эти функции в порядке их следования. То есть в данном случае сначала к элементу применяется перемещение, потом наклон, потом масштабирование и в конце вращение.

Исходная точка трансформации

По умолчанию при применении трансформаций браузер в качестве точки начала преобразования использует центр элемента. Но с помощью свойства transform-origin можно изменить исходную точку. Это свойство в качестве значения принимает значения в пикселях, em и процентах. Также для установки точки можно использовать ключевые слова:

  • left top: левый верхний угол элемента

  • left bottom: левый нижний угол элемента

  • right top: правый верхний угол элемента

  • right bottom: правый нижний угол элемента

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Трансформации в CSS3</title>
        <style>
            div{
                background-color: #ccc;
                width: 100px;
                height: 100px;
                margin: 80px 30px;
                float: left;
                box-sizing: border-box;
                border: 1px solid #333;
            }
            .transform1{
                transform: rotate(-45deg);
            }
            .transform2{
                transform-origin: left top;
                transform: rotate(-45deg);
            }
            .transform3{
                transform-origin: right bottom;
                transform: rotate(-45deg);
            }
        </style>
    </head>
    <body>
        <div class="transform1"></div>
        <div class="transform2"></div>
        <div class="transform3"></div>
    </body>
</html>

Просмотреть  пример

Прочитано 801 раз Последнее изменение Воскресенье, 02 октября 2016 12:23
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+