5

CSS のみを使用して IE 8 以前で 90 度回転するにはどうすればよいですか?

.horizontal {
   display: block;
   width: 300px;
   height: 100px;/*height*/
   background: #FF0000;
   margin: auto;
   margin-top: 110px;
   text-align: center;
   border: 5px solid #000000;

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

2 に答える 2

11

使いたいfilter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

CSS

.horizontal {
    display: block;
    width: 300px;
    height: 100px;/*height*/
    background: #FF0000;
    margin: auto;
    margin-top: 110px;
    text-align: center;
    border: 5px solid #000000;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    transform: rotate(-90deg);
}

これに関する詳細情報

于 2013-07-29T04:32:29.790 に答える
2

現在 CSS3 ドラフト仕様にあるwriting-modeを使用すると、propriety プロパティを使用せずにテキストの回転を実現できます。これにより、より多くのブラウザーが CSS3 ドラフト仕様を採用するにつれて、この概念が効果的に証明されます。

p { writing-mode: tb-rl; }

これは非常に単純な CSS テクニックであり、最終的にはすべてのブラウザーで CSS3 のサポートが向上するにつれて機能します。これは、IE で CSS3 がサポートする数少ないプロパティの 1 つです。tb-rl 値は、テキストが上から下、右から左に流れる段落を表示するようブラウザに指示します。基本的に、テキストを時計回りに 90 度回転させ、右に揃えます。

このプロパティの真意は、日本語の右から左、アラビア語とヘブライ語を右から左、上から下 (rl-tb) で表示するなど、他の言語を正しい「書記モード」で表示することです。

サポート

現時点では、IE は IE5.5 以降でサポートされている唯一のブラウザーです。IE5.5+ から利用できる 4 つの値と、-ms 拡張子を介した IE8+ 用の追加の 4 つの値があります。

  • lr-tb – これはデフォルト値で、左から右、上から下です
  • rl-tb – テキストを右から左、上から下にフローします。
  • tb-rl – テキストを上から下、右から左に垂直にフローします。
  • bt-rl – 下から上、右から左
  • tb-lr – この値と次の値は、-ms-writing-mode を使用して IE8+ でのみ使用できます。テキストは上から下、左から右に流れます
  • bt-lr – 下から上、左から右
  • lr-bt – 左から右、下から上
  • rl-bt – 右から左、下から上

他のブラウザでテキストを回転しますか?

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

オンラインデモ

-ms-writing-mode プロパティ

于 2014-06-24T07:35:12.960 に答える