Можно ли отображать текст под углом на веб-странице? - PullRequest
Новая
       32

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

4 голосов
/ 23 марта 2011

Я хотел бы знать, возможно ли создавать текст на веб-странице под углом, например, при 40 градусах.Если это возможно, как я могу это сделать?

РЕДАКТИРОВАТЬ: Наконец, я решил пойти с ответом Матиаса Биненса.

Ответы [ 3 ]

10 голосов
/ 23 марта 2011

Использовать преобразования CSS3: 

.selector {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
}

IE поддерживает filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);, где свойство поворота принимает одно из четырех значений: 0, 1, 2 или 3, которые повернут элемент на 0, 90, 180 или 270 градусов соответственно , Хотя это фильтр, поэтому я бы не рекомендовал его использовать.

3 голосов
/ 23 марта 2011

Чтобы добавить ответ Матиаса, вы также можете вращать текст в IE: http://snook.ca/archives/html_and_css/css-text-rotation

Однако вы должны быть кратны 90 °.

Кроме того, вы можете использовать SVG / VML для повернутого текста. Посмотрите, например, на эту страницу: http://raphaeljs.com/text-rotation.html

Использует библиотеку RaphaelJS для поворота текста между браузерами без изображений.

0 голосов
/ 23 марта 2011

Матиас прав в своем ответе, но для поддержки IE вы можете использовать их фильтр: 

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/*play with the number to get it right*/

Тогда IE тоже будет поддерживаться :)

...