Поворот текста в HTML, CSS, JS - PullRequest
Новая
       3

Поворот текста в HTML, CSS, JS

1 голос
/ 02 апреля 2011

Как повернуть текст (кросс-браузер)?мой код работает в FireFox, Opera: (

Я ХОЧУ ВРАЩАТЬ ТЕКСТ НА IE TOO (_ Степень вращения может быть любой в пределах 15 и 60 ) 

<html>
<head>
<style type="text/css">

#memo
{
width:200px;
word-wrap: break-word;
background-color:yellow;
}
</style>
</head>

<body>
<php
$deg=rand(15,60);
?>

<div id="memo" style="transform:rotate(<?php echo $deg; ?>deg); -moz-transform:rotate(<?php echo $deg; ?>deg);-webkit-transform:rotate(<?php echo $deg; ?>deg);-o-transform:rotate(<?php echo $deg; ?>deg);">Hello</div>
</body>

</html>

Ответы [ 4 ]

2 голосов
/ 02 апреля 2011

Кажется, работает нормально во всех современных браузерах (не IE) для меня.

Демо: turi.co / up / rand_rotate 

<?php $deg=rand(15,60); ?>
<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Random transform:rotate</title>
        <style type="text/css">
            #memo {
                width:5em; word-wrap:break-word; margin:2em;
                font:700 3em/1.2 'myriad pro', sans-serif;
                transform:rotate(<?php echo $deg; ?>deg);
                -o-transform:rotate(<?php echo $deg; ?>deg);
                -moz-transform:rotate(<?php echo $deg; ?>deg);
                -webkit-transform:rotate(<?php echo $deg; ?>deg);
            }
        </style>
    </head>
    <body>
        <div id="memo">Hello</div>
    </body>
</html>
0 голосов
/ 02 апреля 2011

Используйте отличный плагин jQuery Rotate. http://code.google.com/p/jqueryrotate/. Поддерживается всеми основными браузерами 

* Internet Explorer 6.0 >
* Firefox 2.0 >
* Safari 3 >
* Opera 9 >
* Google Chrome

Чтобы повернуть изображение, все, что вам нужно сделать, это $('#myImage').rotate(30) //for a 30 degree rotation Где #myImage - это идентификатор элемента, который вы хотите повернуть.

Если все, что вам нужно, это вращать текст по вертикали, вы можете без труда использовать простой CSS. 

<h1 id="heading">t e x t</h1>

#heading {
 color:#66CCFF;
 font-size:50px;
 width:0.5em;
}

Проверьте рабочий пример на http://jsfiddle.net/u4Wd2/

0 голосов
/ 02 апреля 2011

Эти 3 правила заставят браузеры не IE вращаться.

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);   
-o-transform: rotate(90deg);

Для IE вы можете использовать фильтры.Я где-то видел -ms-transform, но сейчас не могу его найти.

Использование фильтра: http://snook.ca/archives/html_and_css/css-text-rotation

0 голосов
/ 02 апреля 2011

http://snook.ca/archives/html_and_css/css-text-rotation

-webkit-transform: rotate(-90deg); 
-moz-transform: rotate(-90deg); 
For Opera -> -o-transform support in 10.50
For IE -> filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

Чтобы повернуть 45 в IE 


filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...