Свойства CSS3 для преобразования
ITVDN: курсы программирования
Видеокурсы по
программированию

Выбери свою IT специальность

Начать бесплатно
ITVDN logo
Видеокурсы по
программированию

Выбери свою IT специальность

Начать бесплатно

Введение

Чем больше браузеров начинает поддерживать CSS3, тем больше веб-разработчиков начинает использовать некоторые интересные возможности данной технологии. А именно, совмещая работу CSS3 в связке с HTML5 и JavaScript, реализовывать разного рода графические эффекты. В итоге и появилось сленговое название для этих подходов - «Flash-killer».

В серии статей рассмотрим основные дополнения к CSS3, познакомимся с простейшими 2D и 3D преобразованиями.

Свойства CSS3 – Transform являются, пожалуй, наиболее популярными преобразованиями, которые позволяют применять векторные изменения к HTML элементам, расположенным на странице. Вы сможете контролировать наклон, масштабирование и поворот любого элемента на web-странице. Стоит отметить, что подобные эффекты предпочтительно применять исключительно к изображениям и другим графическим элементам, которые не содержат текстовой информации, поскольку искажение текста существенно снижает его читаемость. Итак, познакомимся с основными функциями свойства transform:


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

  <head>

    <title>title>

    <style>

        div {

            width: 400px;

            height: 200px;

            background-color: crimson;

            margin:100px;

            font-size:50px;

            color: white;

        }

        #skew1 {

            transform: skew(30deg);

        }

        #skew2 {

            transform: skew(-30deg);

        }

        #skew3 {

            transform: skew(10deg, 10deg);

        }

        #skew4 {

            transform: skewX(10deg);

            transform: skewY(-10deg);

        }

    style>

head>

<body>

    <div id="clear">Example Textdiv>

    <div id="skew1">Example Text 1div>

    <div id="skew2">Example Text 2div>

    <div id="skew3">Example Text 3div>

    <div id="skew4">Example Text 4div>

body>

 
Наклон элемента

2. Scale отвечает за масштабирование элемента по горизонтали и вертикали. Также используется и в частных случаях как ScaleX и ScaleY.

<head>

    <title>title>

    <style>

        div {

            width: 400px;

            height: 200px;

            background-color: ActiveCaption;

            margin: 150px;

            font-size: 50px;

            color: white;

            transform: scale(1)

        }

        #scale {

            transform: scale(1.5);

        }

         #scaleX {

            transform: scaleX(1.5);

        }

          #scaleY {

            transform: scaleY(1.7);

        }

     style>

head>

<body>

    <div id="clear">Example Textdiv>

    <div id="scale">Example Text 1div>

    <div id="scaleX">Example Text 2div>

    <div id="scaleY">Example Text 3div>

body>

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

3. Rotate задает поворот элемента относительно точки трансформации, которая в свою очередь задается свойством transform-origin. В простейшем использовании обеспечивает поворот элемента за или против часовой стрелки относительно центра. 

<head>

    <title>title>

    <style>

        div {

            width: 400px;

            height: 200px;

            background-color: chocolate;

            margin:100px;

            font-size:50px;

            color: white;

        }

        #rotateL {

            transform: rotate(-10deg);

        }

        #rotateR {

            transform: rotate(10deg);

        }

     style>

head>

<body>

    <div id="clear">Example Textdiv>

    <div id="rotateL">Example Text 1div>

    <div id="rotateR">Example Text 2div>

body>

Поворот элемента относительно точки трансформации

4. Translate обеспечивает сдвиг элемента на определенное значение по горизонтали и вертикали. TranslateX  отвечает за смещение по горизонтали, принимая положительное значение, сдвигает вправо, а принимая отрицательное значение, сдвигает влево. TranslateY  действует аналогично по вертикальной направленности. Положительное принятое значение сдвигает элемент вниз, а отрицательное - вверх.

<head>

    <title>title>

    <style>

         div {

            width: 400px;

            height: 200px;

            background-color: crimson;

            margin:100px;

            font-size:50px;

            color: white;

        }

        #translateL {

            transform: translateX(-30px);

        }

        #translateR {

            transform: translateX(30px);

        }

        #translateU {

            transform: translateY(-20px);

        }

        #translateD {

            transform: translateY(20px);

        }

    style>

head>

<body>

    <div id="clear">Example Textdiv>

    <div id="translateL">Example Text 1div>

    <div id="translateR">Example Text 2div>

    <div id="translateU">Example Text 3div>

    <div id="translateD">Example Text 4div>

body>

Сдвиг элемента
 

Гораздо эффектней подобные трансформации выглядят, когда выполняются при наведении курсора мыши на элемент. В этом же примере вы сможете увидеть, что можно использовать сразу несколько преобразований для вашего элемента на странице.

<head>

    <title>title>

    <style>

        #example {

            width: 400px;

            height: 400px;

            background-color: #aa9fd5;

            margin: 300px auto;

            font-size: 50px;

            color: white;

        }

            #example:hover {

                transform: skew(30deg) scale(1.5,1.5) rotate(40deg) translateY(150px);

            }

     style>

head>

<body>

    <div id="example">Transformdiv>

body>

 

 

Стоит помнить, что подобные манипуляции при статическом отображении не обеспечат у пользователя особого восхищения. Для того, чтобы привлечь внимание пользователя, стоит уделить время добавлению динамики на страницу. Об этом мы поговорим в следующих статьях из этого цикла. 

КОММЕНТАРИИ И ОБСУЖДЕНИЯ
СТАТЬИ ПО СХОЖЕЙ ТЕМАТИКЕ
ВИДЕО КУРСЫ ПО СХОЖЕЙ ТЕМАТИКЕ

Стань профессионалом, используя все возможности обучения на ITVDN

Стартовый
подписка

Все видео курсы на 3 месяца за 49.99 $

0
Базовый
подписка

Все видео курсы на 6 месяцев за 89.99 $

1
Премиум
подписка

Все видео курсы на 12 месяцев за 169.99 $

2
Notification success