Преобразование CSS3 не работает

Я пытаюсь преобразовать элементы меню, поворачивая их на 10 градусов. Мой CSS работает в Firefox, но я не смог воспроизвести эффект в Chrome и Safari. Я знаю, что IE не поддерживает это свойство CSS3, так что это не проблема.

Я использовал следующий CSS:

li a {
   -webkit-transform:rotate(10deg);
   -moz-transform:rotate(10deg);
   -o-transform:rotate(10deg); 
}

Может кто-нибудь предложить, где я иду не так?

Спасибо.

Ответы

Ответ 1

Это всего лишь образованная догадка, не видя остальной части вашего HTML/CSS:

Применяете ли вы display: block или display: inline-block к li a? Если нет, попробуйте.

В противном случае попробуйте применить правила преобразования CSS3 к li.

Ответ 2

В браузерах на основе webkit (Safari и Chrome) -webkit-transform игнорируется на встроенных элементах.. Установите display: inline-block; в чтобы он работал. Для демонстрации/тестирования вы также можете использовать отрицательный угол или transformation-origin, чтобы текст не был повернут из видимой области.

Ответ 3

_{Поскольку никто не ссылался на соответствующую документацию:}

Преобразование CSS-модулей Уровень 1 - Терминология - Трансформируемый элемент

Преобразуемый элемент является элементом в одной из этих категорий:

элемент, макет которого определяется моделью окна CSS, которая представляет собой block-level или атомный встроенный уровень элемент или свойство отображения вычисляет таблицу-таблицу, таблицу-строку-группу, таблицу-заголовок-группу, таблицу-нижний колонтитул, ячейка или заголовок таблицы

элемент в пространстве имен SVG и не управляется моделью окна CSS, которая имеет атрибуты transform, 'patternTransform' или gradientTransform.

В вашем случае элементы <a> по умолчанию inline.

Изменение значения свойства display до inline-block отображает элементы как атомные элементы линейного уровня, и поэтому элементы становятся "transformable" по определению.

li a {
   display: inline-block;
   -webkit-transform: rotate(10deg);
   -moz-transform: rotate(10deg);
   -o-transform: rotate(10deg); 
   transform: rotate(10deg);
}

Как упоминалось выше, это, по-видимому, применимо только в браузерах на основе -webkit, поскольку оно работает независимо от IE/FF.

Ответ 4

Вы специально пытаетесь повернуть ссылки только? Поскольку выполнение в тегах LI работает нормально.

В соответствии с преобразованиями Snook требуется, чтобы затронутые элементы были блокированы. Он также получил некоторый код, чтобы сделать эту работу для IE с помощью фильтров, если вы хотите добавить его (хотя, как представляется, существует некоторое ограничение на значения).

Ответ 5

-webkit-transform больше не требуется

ms уже поддерживает вращение (-ms-transform: rotate(-10deg);)

попробуйте следующее:

li a {
   ...

    -webkit-transform: rotate(-10deg);
    -moz-transform: rotate(-10deg);
    -o-transform: rotate(-10deg);
    -ms-transform: rotate(-10deg);
    -sand-transform: rotate(10deg);
    display: block;
    position: fixed;
    }