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

30-05-2011
Размещено в рубрике: CSS
Просмотров: 3665

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)

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

blah

Приглашаю присоединиться ко мне в следующих сервисах:
Присоединится ко мне в twitter
Присоединится ко мне в Вконктакте
Присоединится ко мне в Facebook
Присоединится ко мне в Google plus

Мои групы:

Группа webmasterprof.ru в Facebook
Группа webmasterprof.ru в Вконтакте
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.
RSS-подписка | Что такое RSS?
  • Еще по теме ...

Еще по теме:

Комментариев (13)

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

Ответить

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

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

    Ответить

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

      Ответить

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

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

        Ответить

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

Ответить

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

Ответить
Игорь
4

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

Ответить
Игорь
5

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

Ответить

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

@Mail.ru -