13

div内に次のような単純なテキストがあります。

<div id="banner">
    <div>This is an example text</div>
</div>

div内のテキストを20〜30度回転させたい。私はそれについてのstackoverflowでこのトピックをすでに見つけました、そしてそれは私にFirefoxとChromeで望ましい結果を与えますが、IE7、IE8とIE9ではそうではありません。jqueryrotateも試しましたが、これを使用すると、プラグインがdiv内のテキストを回転させるのではなく、div自体で何かを実行しているように見えます。これは、javscriptやcssでも可能ですか？

注：Cufonも使用されています。

Codlersが回答した後の更新：

これは、Codlerの回答後に現在適用されているcssです。FFとChromeで動作します。

-ms-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
/*-moz-rotation-point: 0 0;*/
-webkit-transform: rotate(-20deg);
/*-webkit-rotation-point: 0 0;*/
-o-transform: rotate(-20deg);
/*-ms-writing-mode: tb-lr;
* html writing-mode: tb-lr;*/

更新2：IE7とIE8は現在テキストを回転していますが、IE9では、回転したテキストの後ろに大きな黒い四角が表示されます。これを引き起こしているのは何ですか？CSSは次のようになりました。

-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);  
transform: rotate(-20deg);
background-color:transparent;

/*-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand')";*/
/*filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');*/
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand');
zoom: 1;
z-index:1;

position:absolute;

padding     : 45px 10px 15px 10px;

コードの最終的な作業部分。このためのクレジットは、ジェフとコドラーに行きます。

HTML：

<div id="banner">
    <div>This is an example text</div>
</div>

デフォルトのCSS：

#banner > div
{       
    -moz-transform: rotate(-20deg);                 /*FF*/
    -o-transform: rotate(-20deg);                   /*Opera*/
    -webkit-transform: rotate(-20deg);              /*Safari, Chrome*/
    -ms-transform: rotate(-20deg) !important;       /*IE9*/
        transform: rotate(-20deg);                      /*CSS3 default*/
    background-color:transparent;

    zoom: 1;
    z-index:1; /*NEEDED FOR IE8*/

    width: 191px;

    position:absolute;

    padding     : 45px 10px 15px 10px;
}

CSS FOR IE 7＆8-条件付きで読み込まれます：

#banner
{
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.93969262, M12=0.34202014, M21=-0.34202014, M22=0.93969262,sizingMethod='auto expand') !important;
    padding-top:0px;
}
4

5 に答える 5

14

標準に準拠したブラウザでは、CSS3プロパティを使用できますが、transformベンダープレフィックスを使用することをお勧めします。例：

-o-transform: rotate(5deg);
-khtml-transform: rotate(5deg);
-webkit-transform: rotate(5deg); 
-moz-transform: rotate(5deg);

Internet Explorer 6および7では、状況が複雑になります。IEのfilterプロパティを使用して回転を行うことができます。

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

要素を90度回転します。rotation=2またはを使用して180度または270度回転することもできますrotation=3

IEで何かを別の角度に回転させたいですか？あなたは頭痛の準備ができていますか？

IEのfilterプロパティを再度使用して行列座標を指定すると、次のような非常に醜いものを取得できます。

progid:DXImageTransform.Microsoft.Matrix(M11=0.99619470, M12=0.08715574, M21=-0.08715574, M22=0.99619470,sizingMethod='auto expand');

このページにはマトリックス座標の使用方法に関する説明がありますが、率直に言って、どれも意味がありません。より良い解決策は、角度を度で指定するときに必要なCSSを生成するこの便利なマトリックス計算機を使用することです。

私のサイトでCSSをチェックして例を見ることができますが、IEを使用してしばらくチェックしていないので、約束することはできません...

于 2011-05-31T08:16:20.420 に答える
6

css3で回転することが可能です

transform: rotate(20deg);

一部のブラウザにはベンダープレフィックスが必要であることに注意してください。

.box_rotate {
     -moz-transform: rotate(20deg);  /* FF3.5+ 
       -o-transform: rotate(20deg);  /* Opera 10.5 
  -webkit-transform: rotate(20deg);  /* Saf3.1+, Chrome 
      -ms-transform: rotate(20deg);  /* IE9 
          transform: rotate(20deg);  
             filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9  
                     M11=0.9396926207859084, M12=-0.3420201433256687, M21=0.3420201433256687, M22=0.9396926207859084, sizingMethod='auto expand');
               zoom: 1;
}

ソースhttp://css3please.com/

于 2011-05-31T08:02:38.440 に答える
2

IE9の背景にある黒い四角は、css変換を実行しているセレクターにもこれらの厄介な独自のフィルターがある場合に発生するようです。

于 2012-02-09T16:09:14.447 に答える
1

IEでは実際には不可能です。せいぜい、IEは90度の倍数でしか回転できず、それでも苦痛です（IIRC）。しかし、この答えはそうではないと主張しています。

最近のブラウザでは、すでに提案されているように、、、transformおよび-webkit-transformを使用します。-moz-transform

IEでVML（Vector Markup Language）を使用してそれを回避できる可能性があります。任意の回転ができると思います。

于 2011-05-31T08:11:10.260 に答える
0

このツールを使用して、クロスブラウザで動作するCSSを生成します。

http://www.useragentman.com/IETransformsTranslator/index.html

それは本当に機能します。

于 2011-05-31T08:32:21.710 に答える