Перетворення CSS3 не працює

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

Я використовував наступний CSS:

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

Хто-небудь, будь ласка, підкаже, де я помиляюся?

Дякую.

Це лише здобутий здогад, не бачачи решти HTML / CSS:

Ви звернулися display: blockчи display: inline-blockдо li a? Якщо ні, спробуйте.

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

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

_{Оскільки відповідна документація ніхто не посилається:}

Модуль трансформації CSS Рівень 1 - Термінологія - трансформований елемент

Елемент, що перетворюється - це елемент однієї з таких категорій:

• елемент, макет якого керується моделлю CSS box, яка є або блоковим рівнем, або атомним вбудованим елементом , або властивістю відображення обчислює таблицю-рядок, групу рядків таблиці, групу заголовків таблиці, колонтитул таблиці -група, таблиця-комірка або таблиця-підпис
• елемент у просторі імен SVG і не керується моделлю вікна CSS, яка має атрибути перетворення, '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 незалежно.

Ви спеціально намагаєтесь лише обертати посилання? Тому що робити це на тегах LI, здається, працює нормально.

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

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