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

123

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

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

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

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

Спасибо.

html css

— шрути
источник

2

К вашему сведению, IE поддерживает это свойство CSS3, вам просто нужен префикс:-ms-transform:rotate(10deg);

— Джошуа Пинтер,

Возможный дубликат преобразования CSS не работает со встроенными элементами

— mems

2

Поскольку никто еще не упомянул об этом, так как сейчас 2016 год, убедитесь, что вы поместили версию правила CSS без transform: rotate(10deg);префикса (например ) под теми версиями с префиксом, которые вы выбрали для поддержки.

— Максимиллиан Лаумейстер,

302

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

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

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

— thirtydot
источник

22

Я тебя люблю! display: inline-blockПомог.

— Багз Банни

2

Объяснение было бы полезно :)

— scitronboy

56

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

— phihag
источник

У меня отлично сработало, спасибо! Я использовал его в <span> & copy </span>, чтобы создать символ авторского лева.

— Элизабет

@Elisabeth Это отличное приложение. Обратите внимание, что ссылки на сущности должны заканчиваться точкой с запятой (как в <span>©</span>), хотя большинство браузеров отображают оба варианта.

— phihag 02

Еще одно замечание: если вы применяете преобразование для состояния взаимодействия (например, :hoverили :active), вам необходимо применить inline-blockк элементу в его состоянии по умолчанию, например a { display: inline-block; } a:active { transform: translateY(0.125em); }. Применение только inline-blockк состоянию взаимодействия, похоже, не работает. По крайней мере, в Chrome - в Firefox все работает нормально.

— Поль д'Ауст

1

спасибо за указание на тот факт, что -webkit-transformэто не работает со встроенными элементами. Застрял на этом раньше.

— pbojinov

@phihag Отлично, ты избавил меня от серьезного выдергивания волос! Стоит отметить, что это может привести к исчезновению ваших элементов после запуска анимации.

— texelate 07

21

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

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

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

элемент, компоновка которого регулируется блочной моделью CSS, которая является либо блочным, либо атомарным встроенным элементом , или чье свойство display вычисляется для table-row, table-row-group, table-header-group, table-footer -group, table-cell или table-caption

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

В вашем случае <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 независимо.

— Джош Крозье
источник

0

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

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

— Су»
источник

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

— PDJ
источник

1

Во время своих сегодняшних тестов я заметил, что -webkit-transformэто действительно больше не нужно в Chrome. Однако в Safari 8 он все еще был нужен

— Джон Слегерс

Для чего нужен -sand-transform? Краткий поиск в Google ничего не дал.

— Пит,

Google "наждачная бумага CSS", которая имеет отношение к вопросу и может упростить задачу. это хак, который реализует поддержку стандартного преобразования CSS для старых версий IE

— Педро Хусто