С помощью CSS3 преобразования не работает

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

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

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

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

спасибо.

5 76
html css css3 html5

5 ответов:

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

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

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

201

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

45

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

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

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

  • элемент, макет которого управляется моделью CSS box, которая является либо block-level или атомарный элемент встроенного уровня, или чьи отобразить свойства вычисляет таблицу-строки, таблицы-строки-группы, таблица-заголовок-группа, таблица-колонтитул-группы, ячейки таблицы или таблицы-заголовок
  • элемент в пространстве имен SVG и не регулируется моделью CSS box, которая имеет атрибуты transform,‘ patternTransform ' или gradientTransform.

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

изменение отель 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 независимо.

15

вы специально пытаетесь повернуть только ссылки? Потому что делать это на Ли теги вроде работает нормально.

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

0

-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;
    }
-3