transform в CSS3

28
Июнь
2010

transform в CSS3

Доброго времени суток, ребята! Предлагаю сегодня продолжить рассматривать новые возможности CSS3 и обратить внимание на свойство трансформации "transform". Данное свойство может перемещать, вращать и изменять размеры блоков.

Demo transforms CSS3

К примеру:

transform:translate(50px,0); - сдвигаем объект на 50 пикселей вправо;

transform:rotate(45deg); - поворачиваем объект на 45 градусов;

transform:scale(2); - увеличиваем размер объект в 2 раза.

Но, результатом данного свойства будет грубый тупой сдвиг/поворот/увеличение - объект был на одном месте, навели курсор - появился в другом месте. Скукотаааа... и грубость! Нам же хочется плавной анимации, ёмаё!) И в этом нам поможет свойство "transition", о котором я недавно писал.

Берем эти два свойства-ингредиента, смешиваем и получаем на выходе вкусный пирог! эге-ге-гей!)

Итак, прописываем свойство "transition" (для плавной анимации) контейнеру, к примеру, с произвольным текстом (+ добавляем хаки -webkit-, -moz-, -o- для популярных браузеров):

.mycontainer1 {
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
}

Далее, с помощью свойства "transform", указываем, что при наведении курсора на данный контейнер, он должен сдвинутся на 50 пикселей вправо:

.mycontainer1:hover {
transform:translate(50px,0);
-webkit-transform:translate(50px,0);
-moz-transform:translate(50px,0);
-o-transform:translate(50px,0);
}

Пример (картинка кликабельна):

Properties transform CSS3

Таким же самым образом мы можем вращать объект:

.mycontainer1:hover {
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}

Пример (картинка кликабельна):

Свойство трансформации CSS3

и увеличивать его размеры:

.mycontainer1:hover {
transform:scale(2);
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
}

Пример (картинка кликабельна):

Трансформация в CSS3

"Пощупать" прелести свойства "transform" можно на ДЕМКЕ.

Подробнее в документации на w3.org.

Тестировал на браузерах: Firefox 3.6.3Opera 10.54Chrome 5.0.375.86Safari 4.0.5; Internet Explorer 8.

Заработало свойство только в: Opera 10.54Chrome 5.0.375.86Safari 4.0.5.

Download (скачать) transform CSS3

Ну как Вам данное свойство?

Подписаться на RSSВы можете подписаться на RSS или на E-mail рассылку:

Оставить комментарий с помощью формы ВКонтакте

Комментариев (19) к “transform в CSS3”

  1. [...] This post was mentioned on Twitter by DJ Hennion and Natasha Klever, Oleg Mykhailenko. Oleg Mykhailenko said: Свойство "transform" в CSS3 http://bit.ly/cv9rPw #css3 #css [...]

  2. Роман пишет:

    Отличый туториал, спасибо.

  3. Other пишет:

    Да! Классно все описано и понятно. И эффекты потрясающие. Особенно понравилось увеличение блока. Может быть очень полезным, если нужно выделить что-то в тексте или обратить внимание читателя на что-то. Классно!

  4. Michael de`Oz пишет:

    Прикольно. Но пока не придумал для чего всё это можно использовать

  5. serotonine пишет:

    Очень круто! Всё внятно и очень просто представлено! Блин, css3 – сила! 8)

  6. serotonine пишет:

    Эмм.. Ща затестил. Firefox 3.6.13 не поддерживает данную фичу, а вот Opera 11 всё плавненько выводит.

  7. CyberCreative пишет:

    Я конечно извиняюсь, но бесит вот эта запись

    transform:scale(2);
    -webkit-transform:scale(2);
    -moz-transform:scale(2);
    -o-transform:scale(2);

    как бы прописали хак для мозилы -moz, для хрома с сафари поставили -webkit, опера -o, в ишаке нихрена не пашет. Спрашивается нафига transform:scale(2);

    не понимаю, разработчики браузеров думают типа нафига нам transform:scale(2); у нас же есть свой хак, при этом говорят что css3 поддерживается.

    Может я чего то не догоняю где тут логика? Раз заявила мозила что 8 версия поддерживает transform:scale(2); то должна поддерживать без хака -moz е так ли?

  8. Рустам пишет:

    Ишак тупит как всегда. IE9 не пашет

  9. avex пишет:

    Есть ли возможность сделать div искаженным в перспективу (вспомните инструмент перспектива в фотошопе)?

  10. axax пишет:

    Похоже эти эффекты не работают на текстах да? Только на блоках? :(