The CSS transformations spec говорит, что преобразования работают только на элементах уровня блока или атомарного уровня (например, inline-block). Но почему не работают ли они на встроенных элементах? В чем причина этого ограничения?Почему невозможно преобразовать элементы Inline?
This test от Microsoft показывает, что это возможно. Он проходит в IE9, но не в Chrome. Так что это возможно, просто не по спецификации.
Как упоминалось в @Shikkediel, встроенные элементы не имеют сильной границы, как элементы блока. Они не влияют на поток документа таким же образом, если вообще, и тесно связаны с их соседним текстом или элементами. Преобразования CSS работают в ограничивающей рамке (какие встроенные элементы имеют технически) таким образом, чтобы это не имело смысла для встроенных элементов.
Рассмотрите <strong> в пределах <span> (или div). Полужирный текст определяется только изменением стиля, но может проходить через несколько строк и не имеет предсказуемой прямоугольной ограничивающей области. Если бы вы применили поворот CSS, откуда бы он вращался? Как он будет перепланироваться, если вообще при вращении?
С другой стороны, содержащий <span> имеет прямоугольные границы, поэтому поиск центра и углов, поворот и масштабирование, являются предсказуемыми и четко определенными.
В качестве примера возьмите this fiddle. Фон строкового элемента:
, но границы, показанные в редакторе являются:
Вы можете ясно видеть, что фон и границы элемента не совпадают в все. Без четких границ трансформирует, потому что сложно и не очень полезно.
Я так думаю, например Инструменты Chrome dev показывают вам своего рода ограничительную рамку для встроенных элементов, когда вы их выбираете, и было бы тривиально преобразовать этот ящик, даже если он не прямоугольный. Фактически, этот тест от Microsoft предназначен для преобразования встроенного элемента. Он переходит на IE9, но не на Chrome.Так что это определенно возможно, просто не по спецификации. http://samples.msdn.microsoft.com/ietestcenter/css3/transforms/transform-002.htm – Tetaxa
@Tetaxa Ящик вынужден быть прямоугольником. Это самый маленький прямоугольник, который охватывает содержимое элемента, что делает его очень непредсказуемым размером и формой. Как вы можете видеть из изображений, которые я добавил, это может не соответствовать визуальной форме элемента вообще (и даже не соответствует родительскому в этом случае). Это делает его бесполезным для преобразований, поскольку преобразование изменится в зависимости от настроек шрифта пользователя и любого другого небольшого фактора. – ssube
Я думаю, что вы на вопрос почему. Я категорически не согласен с тем, что это было бы бесполезно. Вращение было бы трудным, но перевод работал бы очень хорошо. Я также не вижу, как настройки шрифта пользователя и т. Д., Влияющие на ограничивающий прямоугольник, отличаются от элемента блока с автоматической высотой или поплавком, оба из которых могут быть просто изменены. – Tetaxa
Это недопустимый вопрос. – Kristine
@ Кристин почему бы и нет? – Tetaxa
Кажется совершенно правильным вопросом для меня. –