Доброго времени суток, ребята! Предлагаю сегодня продолжить рассматривать новые возможности CSS3 и обратить внимание на свойство трансформации "transform". Данное свойство может перемещать, вращать и изменять размеры блоков.
К примеру:
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);
}
Пример (картинка кликабельна):
Таким же самым образом мы можем вращать объект:
.mycontainer1:hover {
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
Пример (картинка кликабельна):
и увеличивать его размеры:
.mycontainer1:hover {
transform:scale(2);
-webkit-transform:scale(2);
-moz-transform:scale(2);
-o-transform:scale(2);
}
Пример (картинка кликабельна):
"Пощупать" прелести свойства "transform" можно на ДЕМКЕ.
Подробнее в документации на w3.org.
Тестировал на браузерах: Firefox 3.6.3; Opera 10.54; Chrome 5.0.375.86; Safari 4.0.5; Internet Explorer 8.
Заработало свойство только в: Opera 10.54; Chrome 5.0.375.86; Safari 4.0.5.
Ну как Вам данное свойство?
ФИ: Михайленко Олег.
[...] 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 [...]
Отличый туториал, спасибо.
Спасибо, Рома!
Да! Классно все описано и понятно. И эффекты потрясающие. Особенно понравилось увеличение блока. Может быть очень полезным, если нужно выделить что-то в тексте или обратить внимание читателя на что-то. Классно!
Спасибо! Рад, что понравилось))
Прикольно. Но пока не придумал для чего всё это можно использовать
Я думаю, найти и придумать не займет много времени))))
Очень круто! Всё внятно и очень просто представлено! Блин, css3 – сила!
Спасибо!
Эмм.. Ща затестил. Firefox 3.6.13 не поддерживает данную фичу, а вот Opera 11 всё плавненько выводит.
Ну, я и писал, что ФФ еще не поддерживает, ну а Опера “хавает”
Не знаю, у меня версия firefox 3.6.13 (OS Ubuntu) и все работает
Класная штука…
Значит уже есть поддержка
Это хорошо!
Я конечно извиняюсь, но бесит вот эта запись
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 е так ли?
Если заявлено, то должно поддерживать.
А хаки для устаревших версий браузеров.
Ишак тупит как всегда. IE9 не пашет
Есть ли возможность сделать div искаженным в перспективу (вспомните инструмент перспектива в фотошопе)?
Не готов Вам сейчас ответить, возможно в связке с HTML5 получится
Похоже эти эффекты не работают на текстах да? Только на блоках?