2D-трансформации CSS3

CSS-трансформации (как 2D, так и 3D-варианты) совершенно не то же самое, что CSS-переходы, несмотря на то что они могут показаться схожими. Думайте о них так: переходы позволяют сделать плавным процесс смены одного состояния на другое, а трансформации определяют то, каким станет соответствующий элемент. Вот мой собственный (надо признать, ребяческий) способ запомнить все это:

Представьте робота-трансформера, например Оптимуса Прайма. Это робот, который за некоторый промежуток времени (переход) превращается (трансформируется) в кое-что другое — в грузовик.

Если этот способ лишь еще сильнее запутал вас (либо вы не имеете ни малейшего понятия о том, кто такой Оптимус Прайм), копнем глубже. Мы добавим 2D-переход к выделенному состоянию навигационных ссылок на сайте And the winner isn’t.:

Nav ul li a: hover {

Transform: scale (1.7);

}

Теперь при наведении указателя мыши на ссылку в современном браузере будет наблюдаться следующий эффект (рисунок 7.4).

Рисунок 7.4. При наведении указателя мыши ссылка увеличивается.

Мы сообщили браузеру, что хотим, чтобы при наведении указателя мыши на данный элемент он увеличивался в 1,7 раза по сравнению со своими первоначальными размерами.

Если вы решите добавить такое правило для элемента в Safari, то знайте, что необходимо, чтобы основной элемент отображался как блочный. Например:

Nav ul li a {height: 42px; text-decoration: none; text-transform: uppercase; color: black;

Text-shadow: 0 1px 0 hsla (0, 0%, 100%, 1.0); font: 1.875em/42px ‘BebasNeueRegular’; display: block;

}

В противном случае ничего не произойдет, что, как вы понимаете, будет плохо.