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

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

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

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

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

Спасибо.

источник

2011-02-07 shruti

Можете ли вы опубликовать HTML-код? – Kyle

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

Возможный дубликат [CSS-преобразование не работает на встроенных элементах] (http: // stackoverflow. com/questions/14883250/css-transform-doesnt-work-on-inline-elements) – mems

160

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

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

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

источник

2011-02-07 10:15:43 thirtydot

Я тебя люблю! «Дисплей: встроенный блок» помог. –

Вы конкретно пытаетесь повернуть ссылки только? Потому что делать это on the LI tags, кажется, работает нормально.

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

источник

2011-02-07 10:17:42

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

источник

2011-02-07 10:25:19 phihag

Отлично работает для меня, спасибо! Я использовал его на и скопировал, чтобы сделать символ copyleft. – Elisabeth

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

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

-3

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

источник

2014-05-05 16:45:38 pdj

Во время моих тестов сегодня я заметил, что '-webkit-transform' действительно больше не нужно в Chrome. Тем не менее, он по-прежнему необходим в Safari 8. –

Что такое -sand-transform? Краткий поиск в Google ничего не показал. – Pete

«Наждачная бумага CSS», которая имеет отношение к вопросу и может упростить задачу. Это взлом, который реализует поддержку стандартного преобразования CSS для старых версий IE –

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

CSS Transforms Module Level 1 - Terminology - Transformable Element

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

элемента с макетом определяется модель коробки CSS, который является либо block-level или atomic inline-level element, или чьим display property вычисляет для таблицы-строки , table-row-group, table-header-group, table-footer-group, table-cell или table-caption

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

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

изменения значения display свойства, к inline-block оказывает элементы, как atomic inline-level elements, и, следовательно, элементы становятся "transformable" по определению.

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

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

источник

2015-02-22 23:31:12

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

ответ

Смежные вопросы