Teks vertikal (diputar) dalam tabel HTML

Jawaban:

105

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
             filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
    }
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>

Diambil dari http://css3please.com/

Pada 2017, situs yang disebutkan di atas telah menyederhanakan kumpulan aturan untuk menghapus filter Internet Explorer lama dan lebih mengandalkan standar sekarang. transform properti :

.box_rotate {
  -webkit-transform: rotate(7.5deg);  /* Chrome, Opera 15+, Safari 3.1+ */
      -ms-transform: rotate(7.5deg);  /* IE 9 */
          transform: rotate(7.5deg);  /* Firefox 16+, IE 10+, Opera */
}
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>

Álvaro González
sumber
Kelihatannya bagus - Saya akan memeriksa seberapa baik ini bekerja dengan berbagai browser. (Dan menggunakan 90deg, tentu saja ...)
Florian Jenn
9
Namun ada satu masalah, kolom judul tabel th tidak akan ditambah lebarnya setelah rotasi jika diperlukan, sehingga terlihat sekilas (dicoba di FF) :(
xaralis
3
Ya, di firefox (tidak tahu tentang browser lain) baik <tr> akan diputar dan kolom lainnya tidak menyesuaikan ATAU, Anda dapat meletakkan <div> di dalam <tr> dan bereksperimen dengan mengatur <tr> POSITION to RELATIVE dan isi <div> menjadi ABSOLUTE dan -moz-transform-origin: 0 50%; Ini akan memperbaiki posisinya. Untuk mendapatkan lebar yang benar dan tinggi, Anda mungkin perlu menggunakan jquery atau sesuatu untuk mengatur <tr> 's lebar dan tinggi ke <div>' s tinggi dan lebar (masing-masing).
Adrian Garner
2
Hanya berfungsi jika Anda memiliki sel persegi, jadi tidak menghemat ruang horizontal apa pun
99 Masalah - Sintaksnya bukan
1
Ini hanya akan bekerja untuk sel yang ada square, jika tidak setelah rotasi, tinggi dan lebar juga diputar bersama dengan elemen yang merusak tampilan dan teks elemen tumpang tindih dengan lainnya
Rajshekar Reddy
35

Solusi Alternatif?

Alih-alih memutar teks, apakah akan berhasil jika teksnya ditulis "dari atas ke bawah?"

Seperti ini:

S  
O  
M  
E  

T  
E  
X  
T  

Saya pikir itu akan jauh lebih mudah - Anda dapat memilih string teks secara terpisah dan memasukkan jeda baris setelah setiap karakter.

Ini dapat dilakukan melalui JavaScript di browser seperti ini:

"SOME TEXT".split("").join("\n")

... atau Anda dapat melakukannya di sisi server, sehingga tidak akan bergantung pada kemampuan JS klien. (Saya berasumsi itulah yang Anda maksud dengan "portabel?")

Juga pengguna tidak harus memalingkan kepalanya ke samping untuk membacanya. :)

Memperbarui

Utas ini tentang melakukan ini dengan jQuery.

Nathan Long
sumber
1
Ada penelitian yang menunjukkan bahwa jenis tata letak kurang terbaca yang berputar ke kiri / kanan
Édouard Lopez
14

Ada kutipan dalam jawaban asli dan jawaban saya sebelumnya di baris IE8 yang membuang ini, tepat di dekat titik koma. Astaga dan BAAAAD! Kode di bawah ini memiliki rotasi yang diatur dengan benar dan berfungsi. Anda harus mengapung di IE agar filter dapat diterapkan.

<div style = "
    float: kiri; 
    posisi: relatif;
    -moz-transform: rotate (270deg); / * FF3.5 + * /        
    -o-transform: rotate (270deg); / * Opera 10.5 * /   
    -webkit-transform: rotate (270deg); / * Saf3.1 +, Chrome * /              
    filter: progid: DXImageTransform.Microsoft.BasicImage (rotasi = 3); / * IE6, IE7 * /          
    -ms-filter: progid: DXImageTransform.Microsoft.BasicImage (rotasi = 3); / * IE8 * /           
"
> Hitung & Nilai </div>;
Rob Pinion
sumber
5
1 untuk menunjukkan perlunya float agar ini berfungsi di IE.
RET
4

Setelah mencoba selama lebih dari dua jam, saya dapat dengan aman mengatakan bahwa semua metode yang disebutkan sejauh ini tidak berfungsi di seluruh browser, atau untuk IE bahkan di seluruh versi browser ...

Misalnya (jawaban top upvoted):

 filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
     -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */

berputar dua kali di IE9, sekali untuk filter, dan sekali untuk -ms-filter, jadi ...

Semua metode lain yang disebutkan juga tidak berfungsi, setidaknya jika Anda tidak harus menyetel tinggi / lebar tetap dari sel header tabel (dengan warna latar belakang), yang akan secara otomatis menyesuaikan dengan ukuran elemen tertinggi.

Jadi untuk menguraikan tentang pembuatan gambar sisi server yang diusulkan oleh Nathan Long, yang benar-benar satu-satunya metode yang berfungsi secara universal, berikut kode VB.NET saya untuk penangan generik (* .ashx):

Imports System.Web
Imports System.Web.Services


Public Class GenerateImage
    Implements System.Web.IHttpHandler


    Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
        'context.Response.ContentType = "text/plain"
        'context.Response.Write("Hello World!")
        context.Response.ContentType = "image/png"

        Dim strText As String = context.Request.QueryString("text")
        Dim strRotate As String = context.Request.QueryString("rotate")
        Dim strBGcolor As String = context.Request.QueryString("bgcolor")

        Dim bRotate As Boolean = True

        If String.IsNullOrEmpty(strText) Then
            strText = "No Text"
        End If


        Try
            If Not String.IsNullOrEmpty(strRotate) Then
                bRotate = System.Convert.ToBoolean(strRotate)
            End If
        Catch ex As Exception

        End Try


        'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate)
        'Dim img As System.Drawing.Image = CreateBitmapImage(strText, bRotate)

        ' Generic error in GDI+
        'img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)

        'Dim bm As System.Drawing.Bitmap = New System.Drawing.Bitmap(img)
        'bm.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)

        Using msTempOutputStream As New System.IO.MemoryStream
            'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate)
            Using img As System.Drawing.Image = CreateBitmapImage(strText, bRotate, strBGcolor)
                img.Save(msTempOutputStream, System.Drawing.Imaging.ImageFormat.Png)
                msTempOutputStream.Flush()

                context.Response.Buffer = True
                context.Response.ContentType = "image/png"
                context.Response.BinaryWrite(msTempOutputStream.ToArray())
            End Using ' img

        End Using ' msTempOutputStream

    End Sub ' ProcessRequest


    Private Function CreateBitmapImage(strImageText As String) As System.Drawing.Image
        Return CreateBitmapImage(strImageText, True)
    End Function ' CreateBitmapImage


    Private Function CreateBitmapImage(strImageText As String, bRotate As Boolean) As System.Drawing.Image
        Return CreateBitmapImage(strImageText, bRotate, Nothing)
    End Function


    Private Function InvertMeAColour(ColourToInvert As System.Drawing.Color) As System.Drawing.Color
        Const RGBMAX As Integer = 255
        Return System.Drawing.Color.FromArgb(RGBMAX - ColourToInvert.R, RGBMAX - ColourToInvert.G, RGBMAX - ColourToInvert.B)
    End Function



    Private Function CreateBitmapImage(strImageText As String, bRotate As Boolean, strBackgroundColor As String) As System.Drawing.Image
        Dim bmpEndImage As System.Drawing.Bitmap = Nothing

        If String.IsNullOrEmpty(strBackgroundColor) Then
            strBackgroundColor = "#E0E0E0"
        End If

        Dim intWidth As Integer = 0
        Dim intHeight As Integer = 0


        Dim bgColor As System.Drawing.Color = System.Drawing.Color.LemonChiffon ' LightGray
        bgColor = System.Drawing.ColorTranslator.FromHtml(strBackgroundColor)

        Dim TextColor As System.Drawing.Color = System.Drawing.Color.Black
        TextColor = InvertMeAColour(bgColor)

        'TextColor = Color.FromArgb(102, 102, 102)



        ' Create the Font object for the image text drawing.
        Using fntThisFont As New System.Drawing.Font("Arial", 11, System.Drawing.FontStyle.Bold, System.Drawing.GraphicsUnit.Pixel)

            ' Create a graphics object to measure the text's width and height.
            Using bmpInitialImage As New System.Drawing.Bitmap(1, 1)

                Using gStringMeasureGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpInitialImage)
                    ' This is where the bitmap size is determined.
                    intWidth = CInt(gStringMeasureGraphics.MeasureString(strImageText, fntThisFont).Width)
                    intHeight = CInt(gStringMeasureGraphics.MeasureString(strImageText, fntThisFont).Height)

                    ' Create the bmpImage again with the correct size for the text and font.
                    bmpEndImage = New System.Drawing.Bitmap(bmpInitialImage, New System.Drawing.Size(intWidth, intHeight))

                    ' Add the colors to the new bitmap.
                    Using gNewGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpEndImage)
                        ' Set Background color
                        'gNewGraphics.Clear(Color.White)
                        gNewGraphics.Clear(bgColor)
                        gNewGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias
                        gNewGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.AntiAlias


                        ''''

                        'gNewGraphics.TranslateTransform(bmpEndImage.Width, bmpEndImage.Height)
                        'gNewGraphics.RotateTransform(180)
                        'gNewGraphics.RotateTransform(0)
                        'gNewGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SystemDefault


                        gNewGraphics.DrawString(strImageText, fntThisFont, New System.Drawing.SolidBrush(TextColor), 0, 0)

                        gNewGraphics.Flush()

                        If bRotate Then
                            'bmpEndImage = rotateImage(bmpEndImage, 90)
                            'bmpEndImage = RotateImage(bmpEndImage, New PointF(0, 0), 90)
                            'bmpEndImage.RotateFlip(RotateFlipType.Rotate90FlipNone)
                            bmpEndImage.RotateFlip(System.Drawing.RotateFlipType.Rotate270FlipNone)
                        End If ' bRotate

                    End Using ' gNewGraphics

                End Using ' gStringMeasureGraphics

            End Using ' bmpInitialImage

        End Using ' fntThisFont

        Return bmpEndImage
    End Function ' CreateBitmapImage


    ' http://msdn.microsoft.com/en-us/library/3zxbwxch.aspx
    ' http://msdn.microsoft.com/en-us/library/7e1w5dhw.aspx
    ' http://www.informit.com/guides/content.aspx?g=dotnet&seqNum=286
    ' http://road-blogs.blogspot.com/2011/01/rotate-text-in-ssrs.html
    Public Shared Function GenerateImage_CrappyOldReportingServiceVariant(ByVal strText As String, ByVal strFont As String, bRotate As Boolean) As System.Drawing.Image
        Dim bgColor As System.Drawing.Color = System.Drawing.Color.LemonChiffon ' LightGray
        bgColor = System.Drawing.ColorTranslator.FromHtml("#E0E0E0")


        Dim TextColor As System.Drawing.Color = System.Drawing.Color.Black
        'TextColor = System.Drawing.Color.FromArgb(255, 0, 0, 255)

        If String.IsNullOrEmpty(strFont) Then
            strFont = "Arial"
        Else
            If strFont.Trim().Equals(String.Empty) Then
                strFont = "Arial"
            End If
        End If


        'Dim fsFontStyle As System.Drawing.FontStyle = System.Drawing.FontStyle.Regular
        Dim fsFontStyle As System.Drawing.FontStyle = System.Drawing.FontStyle.Bold
        Dim fontFamily As New System.Drawing.FontFamily(strFont)
        Dim iFontSize As Integer = 8 '//Change this as needed


        ' vice-versa, because 270° turn
        'Dim height As Double = 2.25
        Dim height As Double = 4
        Dim width As Double = 1

        ' width = 10
        ' height = 10

        Dim bmpImage As New System.Drawing.Bitmap(1, 1)
        Dim iHeight As Integer = CInt(height * 0.393700787 * bmpImage.VerticalResolution) 'y DPI
        Dim iWidth As Integer = CInt(width * 0.393700787 * bmpImage.HorizontalResolution) 'x DPI

        bmpImage = New System.Drawing.Bitmap(bmpImage, New System.Drawing.Size(iWidth, iHeight))



        '// Create the Font object for the image text drawing.
        'Dim MyFont As New System.Drawing.Font("Arial", iFontSize, fsFontStyle, System.Drawing.GraphicsUnit.Point)
        '// Create a graphics object to measure the text's width and height.
        Dim MyGraphics As System.Drawing.Graphics = System.Drawing.Graphics.FromImage(bmpImage)
        MyGraphics.Clear(bgColor)


        Dim stringFormat As New System.Drawing.StringFormat()
        stringFormat.FormatFlags = System.Drawing.StringFormatFlags.DirectionVertical
        'stringFormat.FormatFlags = System.Drawing.StringFormatFlags.DirectionVertical Or System.Drawing.StringFormatFlags.DirectionRightToLeft
        Dim solidBrush As New System.Drawing.SolidBrush(TextColor)
        Dim pointF As New System.Drawing.PointF(CSng(iWidth / 2 - iFontSize / 2 - 2), 5)
        Dim font As New System.Drawing.Font(fontFamily, iFontSize, fsFontStyle, System.Drawing.GraphicsUnit.Point)


        MyGraphics.TranslateTransform(bmpImage.Width, bmpImage.Height)
        MyGraphics.RotateTransform(180)
        MyGraphics.TextRenderingHint = System.Drawing.Text.TextRenderingHint.SystemDefault
        MyGraphics.DrawString(strText, font, solidBrush, pointF, stringFormat)
        MyGraphics.ResetTransform()

        MyGraphics.Flush()

        'If Not bRotate Then
        'bmpImage.RotateFlip(System.Drawing.RotateFlipType.Rotate90FlipNone)
        'End If

        Return bmpImage
    End Function ' GenerateImage



    ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
        Get
            Return False
        End Get
    End Property ' IsReusable


End Class

Perhatikan bahwa jika Anda berpikir bahwa bagian ini

        Using msTempOutputStream As New System.IO.MemoryStream
            'Dim img As System.Drawing.Image = GenerateImage(strText, "Arial", bRotate)
            Using img As System.Drawing.Image = CreateBitmapImage(strText, bRotate, strBGcolor)
                img.Save(msTempOutputStream, System.Drawing.Imaging.ImageFormat.Png)
                msTempOutputStream.Flush()

                context.Response.Buffer = True
                context.Response.ContentType = "image/png"
                context.Response.BinaryWrite(msTempOutputStream.ToArray())
            End Using ' img

        End Using ' msTempOutputStream

bisa diganti dengan

img.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Png)

karena ia bekerja pada server pengembangan, maka Anda salah mengira bahwa kode yang sama tidak akan memunculkan pengecualian GDI + Generik jika Anda menerapkannya ke server Windows 2003 IIS 6 ...

lalu gunakan seperti ini:

<img alt="bla" src="GenerateImage.ashx?no_cache=123&text=Hello%20World&rotate=true" />
Stefan Steiger
sumber
Namun, ini tergantung pada VB.NET, yang juga tidak portabel secara universal. (Tapi setidaknya menggeser masalah dari klien ke server.)
Florian Jenn
@Florian Jenn: Ya, kode VB.NET bergantung pada VB.NET tetapi Anda dapat melakukan hal yang sama dengan PHP atau Phyton atau Ruby atau yang lainnya :) Ngomong-ngomong, ubah ke C # dan Anda dapat menjalankannya di mono untuk Linux atau Mac atau Solaris.
Stefan Steiger
4

Kontribusi pertama saya ke komunitas, misalnya memutar teks sederhana dan header tabel, hanya menggunakan html dan css.

masukkan deskripsi gambar di sini

HTML

<div class="rotate">text</div>

CSS

.rotate {
  display:inline-block;
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

Berikut contoh di jsfiddle

omardiaze
sumber
Saat ini disarankan untuk menggunakan potongan daripada jsfiddle.
matsjoyce
Jika saya mengerti dengan benar, ini adalah aturan CSS terbaru, dibandingkan dengan solusi Álvaro G. Vicario?
Florian Jenn
Potongan @matsjoyce memiliki banyak bug dan juga jeda di antaranya membuatnya kehilangan pekerjaan ..
Rajshekar Reddy
1
Jawaban ini hanya berfungsi untuk sel persegi .. Ini rusak untuk sel persegi panjang jsfiddle.net/a2uxgm44/156
Rajshekar Reddy
3

Filter IE ditambah transformasi CSS ( Safari dan Firefox ).

Dukungan IE adalah yang tertua, Safari memiliki [setidaknya beberapa?] Dukungan di 3.1.2, dan Firefox tidak akan memiliki dukungan hingga 3.1.

Sebagai alternatif, saya akan merekomendasikan campuran Canvas / VML atau SVG / VML. (Kanvas memiliki dukungan yang lebih luas.)

kelopak mata
sumber
Saya setuju dengan kelopak mata. Itu semua sangat "hack" sekarang. Belum cukup siap untuk prime-time.
Diodeus - James MacFarlane
2

Ini adalah salah satu yang berfungsi untuk teks biasa dengan beberapa pemrosesan sisi server:

public string RotateHtmltext(string innerHtml)
{
   const string TRANSFORMTEXT = "transform: rotate(90deg);";
   const string EXTRASTYLECSS = "<style type='text/css'>.r90 {"
                                 + "-webkit-" + TRANSFORMTEXT
                                 + "-moz-" + TRANSFORMTEXT
                                 + "-o-" + TRANSFORMTEXT
                                 + "-ms-" + TRANSFORMTEXT
                                 + "" + TRANSFORMTEXT
                                 + "width:1em;line-height:1ex}</style>";
   const string WRAPPERDIV = "<div style='display: table-cell; vertical-align: middle;'>";

   var newinnerHtml = string.Join("</div>"+WRAPPERDIV, Regex.Split(innerHtml, @"<br */?>").Reverse());

   newinnerHtml = Regex.Replace(newinnerHtml, @"((?:<[^>]*>)|(?:[^<]+))",
                                 match => match.Groups[1].Value.StartsWith("<")
                                             ? match.Groups[1].Value
                                             : string.Join("", match.Groups[1].Value.ToCharArray().Select(x=>"<div class='r90'>"+x+"</div>")),
                                 RegexOptions.Singleline);
   return EXTRASTYLECSS + WRAPPERDIV + newinnerHtml + "</div>";
}

yang memberikan sesuatu seperti:

<style type="text/css">.r90 {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
width: 1em;
line-height: 1ex; 
}</style>
<div style="display: table-cell; vertical-align: middle;">
<div class="r90">p</div>
<div class="r90">o</div>
<div class="r90">s</div>
</div><div style="display: table-cell; vertical-align: middle;">
<div class="r90">(</div>
<div class="r90">A</div>
<div class="r90">b</div>
<div class="r90">s</div>
<div class="r90">)</div>
</div>

http://jsfiddle.net/TzzHy/

Cine
sumber
1

Saya menggunakan pustaka Font Awesome dan dapat mencapai pengaruh ini dengan menempelkan hal berikut ke elemen html apa pun.

<div class="fa fa-rotate-270">
  My Test Text
</div>

Jarak tempuh Anda mungkin berbeda.

Jeff Ancel
sumber
1

Solusi lain:

(function () {

    var make_rotated_text = function (text)
    {
        var can = document.createElement ('canvas');
        can.width = 10;
        can.height = 10;
        var ctx=can.getContext ("2d");
        ctx.font="20px Verdana";
        var m = ctx.measureText(text);
        can.width = 20;
        can.height = m.width;
        ctx.font="20px Verdana";
        ctx.fillStyle = "#000000";
        ctx.rotate(90 * (Math.PI / 180));
        ctx.fillText (text, 0, -2);
        return can;
    };

    var canvas = make_rotated_text ("Hellooooo :D");
    var body = document.getElementsByTagName ('body')[0];
    body.appendChild (canvas);

}) ();

Saya benar-benar mengakui bahwa ini cukup hackish, tetapi ini adalah solusi sederhana jika Anda ingin menghindari membengkaknya css Anda.

arkod
sumber
0
-moz-transform: rotate(7.5deg);  /* FF3.5+ */
-o-transform: rotate(7.5deg);  /* Opera 10.5 */
-webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=1);  /* IE6,IE7 allows only 1, 2, 3 */
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"; /* IE8 allows only 1 2 or 3*/
Rob Pinion
sumber
0

Silahkan lihat ini, saya menemukan ini sambil mencari solusi untuk IE 7.

benar-benar solusi yang keren untuk getaran css saja

Terima kasih aiboy untuk soultionnya

inilah tautannya

dan di sini adalah link stack-overflow tempat saya menemukan link ini meong

         .vertical-text-vibes{

                /* this is for shity "non IE" browsers
                   that dosn't support writing-mode */
                -webkit-transform: translate(1.1em,0) rotate(90deg);
                   -moz-transform: translate(1.1em,0) rotate(90deg);
                     -o-transform: translate(1.1em,0) rotate(90deg);
                        transform: translate(1.1em,0) rotate(90deg);
                -webkit-transform-origin: 0 0;
                   -moz-transform-origin: 0 0;
                     -o-transform-origin: 0 0;
                        transform-origin: 0 0;  
             /* IE9+ */    ms-transform: none;    
                   -ms-transform-origin: none;    
        /* IE8+ */    -ms-writing-mode: tb-rl;    
   /* IE7 and below */    *writing-mode: tb-rl;

            }
James Nicholson
sumber