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

Question

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

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

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

Может кто-нибудь подсказать, где я ошибаюсь?

Спасибо.

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

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

• элемент, макет которого регулируется блочной моделью CSS, который является либо блочным уровнем или элементарным элементом строчного уровня , либо чье свойство отображения вычисляет для строки таблицы, группы строк таблицы, группы заголовков таблицы, группы нижнего колонтитула таблицы, ячейки таблицы или заголовка таблицы
• элемент в пространстве имен SVG, который не управляется блочной моделью CSS, которая имеет атрибуты transform, patternTransform или градиентTransform.

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

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

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

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

Answer 4

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

мс уже поддерживает вращение (-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;
    }

Answer 5

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

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