CSS Transform – перемещаем предметы

CSS transform – translateДавненько я уже не писал продолжение сериала о новых свойствах CSS3.

Пора исправить этот недочет. Сегодня мы рассмотрим такой эффект как css transform.

Мы уже рассмотрели: opacity css, закруглённые края css, text-shadow, css shadow

Как понятно из названия он позволят трансформировать наш объект.

Какие именно трансформации нам доступны мы посмотрим на конкретных примерах, что бы не гонять зря воздух.

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

Теперь небольшой экскурс, а именно какие свойства css3 мы уже успели рассмотреть: закругленные края css, text-shadow, box-shadow, прозрачность css, outline.

Сегодня мы рассмотрим трансформацию – передвижение. Она позволит передвинуть наш объект в нужном нам направлении.

Часть 1. CSS transform – translate: Передвижение

С помощью translate мы можем двигать наши объекты от его первоначального местоположение.

Синтаксис transform – translate

1
transform: translate(количество пикселей, количество пикселей)

В скобках указаны координаты:

  1. число – сдвиг по оси Х;
  2. число – сдвиг по оси Y;

Для реализации примера возьмем наших старых друзей — синий квадрат и зеленый квадрат:

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
.kvblue{
background:blue;
height:100px;
width:100px;
}
 .kvgreen{
background:green;
height:100px;
width:100px;
}

Результат:

CSS Transform – перемещение объектов

Пример: А теперь применим наше свойство transform: translate для зеленого квадрата

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
11
kvblue{
background:blue;
height:100px;
width:100px;
}
 .kvgreen{
background:green;
height:100px;
width:100px;
-moz-transform: translate(5px, -20px)
}

Результат:

CSS Transform – перемещение объектов

Как видите, у нас произошло смещение, и наш зеленый квадрат залез на синий.

Синтаксис transform – translate для каждой оси

1
transform: translateX (количество пикселей)

Данный параметр двигает объект только по оси X.

Пример:

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
11
.kvblue{
background:blue;
height:100px;
width:100px;
}
 .kvgreen{
background:green;
height:100px;
width:100px;
-moz-transform: translateX(20px)
}

Результат:

CSS Transform – перемещение объектов

1
transform: translateY (количество пикселей)

Данный параметр двигает объект только по оси Y.

Пример:

Html

1
2
<div class="kvblue"></div>
<div class="kvgreen"></div>

Стили

1
2
3
4
5
6
7
8
9
10
11
.kvblue{
background:blue;
height:100px;
width:100px;
}
 .kvgreen{
background:green;
height:100px;
width:100px;
-moz-transform: translateY(20px)
}

Результат:

CSS Transform – перемещение объектов

Как вы помните из статьи css position и его виды, такого же результата можно было бы добиться с помощью position:relative.

Но здесь есть очень важное отличие:

  • при position:relative – двигается сам элемент;
  • при transform: translate – двигается только графическое отображение элемента; (сам же элемент остается неподвижным)

Нагрузка на браузер в этом случае намного меньше. Так как браузеру не нужно перестраивать весь макет.

Поддержка CSS transform:translate браузерами

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

Под костылем я понимаю префиксы для каждого браузера:

  • Firefox (-moz-transform);
  • Chrome (-webkit-transform);
  • Opera (-o-transform);
  • Internet Explorer 9 (-ms-transform);

P.S. Так же существует transform3d которые умеет двигать элемент и по оси Z. Но его поддерживают только webkit браузеры (Chrome, Safari)

Интересное — Купание кота в умывальнике

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев16 комментариев

А вот интересно, сколько у тебя самого уходит времени, чтобы разобраться со всем этими новыми фишками?

    Все зависит от сложности желаемого результата. Сами фишки благодаря структуре css построены по схожему принципу.

    А вот когда лепишь какую-то структуру из разных компонентов, вот тогда приходится повозится.

      кстати, почему когда проверяю эту страничку валидатором (созранённую страницу, ибо по ссылку не хочет), то выдаёт 214 ошибок? почему настолько невалидный код?

        На валадность чего вы проверяли мою страницу?

        В css основные претензии, что код не соответствует css 2.1.

Валидность кода а не ксс

Не хотел обидеть. А чем проверял?

Игорь
4

Почему в конце строки в которой использовался префикс Вы не ставите (;), пример: -moz-transform: translateY (20p) или Вы подразумеваете, что она там и так должна быть или это опечатка?

Игорь
5

Дело в том, что когда я для одного селектора задавал всего лишь одно свойство из ccs3, то без точки с запятой (;) это -moz-transform: translate (5px, -20px) работало, но когда начал задавать им и другие свойства из Ваших статей, перестало работать свойство — transform:translate пока я не поставил в конце — (;)

Да css3 и html5 открывают новые возможности в сайтостроении

вообще-то при при position:relative и свойствах типа top:10px элемент в потоке НЕ двигается. В этом и суть relative 🙂

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет