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

К примеру:

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

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

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

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

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

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

1
2
3
4
5
6

.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 пикселей вправо:

1
2
3
4
5
6

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

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

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

1
2
3
4
5
6

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

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

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

1
2
3
4
5
6

.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.

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