HTML tablosunda dikey (döndürülmüş) metin


Yanıtlar:


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>

Alındığı http://css3please.com/

2017 itibarıyla, yukarıda belirtilen site, eski Internet Explorer filtresini bırakacak ve artık standart transformözelliğe daha fazla güvenecek şekilde ayarlanan kuralı basitleştirdi :

.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>


Bu harika görünüyor - bunun çeşitli tarayıcılarda ne kadar iyi çalıştığını kontrol edeceğim. (Ve 90degtabii ki kullanarak ...)
Florian Jenn

9
Yine de bir sorun var, sütunların başlığındaki tablonun genişliği gerektiğinde döndürüldükten sonra artırılmayacak, bu yüzden kısa görünüyor (FF'de denendi) :(
xaralis

3
Evet, firefox'ta (diğer tarayıcıları bilmiyorum) ya <tr> döndürülür ve sütunun geri kalanı OR ayarlamaz, <tr> içine bir <div> koyabilir ve <tr> POZİSYON RELATIVE'a ve içerilen <div> MUTLAK'a ve -moz-dönüşüm-kaynağı: 0% 50; Bu, konumunu düzeltecektir. Doğru genişliği ve yüksekliği elde etmek için jquery veya <tr> 'nin genişliğini ve yüksekliğini <div>' in yüksekliğine ve genişliğine (sırasıyla) ayarlamak için kullanmanız gerekebilir .
Adrian Garner

2
Yalnızca kare hücreleriniz varsa çalışır, bu nedenle herhangi bir yatay alan kaydetmez
99 Sorun - Sözdizimi bir değil

1
Bu yalnızca hücreler için işe yarayacaktır square, aksi takdirde döndürmeden sonra, görünümü bozan öğeyle birlikte yükseklik ve genişlik de döndürülür ve öğelerin metni diğerleriyle çakışır
Rajshekar Reddy

35

Alternatif Çözüm?

Metni döndürmek yerine, "yukarıdan aşağıya" yazması işe yarar mı?

Bunun gibi:

S  
O  
M  
E  

T  
E  
X  
T  

Bunun çok daha kolay olacağını düşünüyorum - bir metin dizisi seçebilir ve her karakterden sonra bir satır sonu ekleyebilirsiniz.

Bu, tarayıcıda JavaScript aracılığıyla şu şekilde yapılabilir:

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

... veya bunu sunucu tarafında yapabilirsiniz, böylece istemcinin JS yeteneklerine bağlı kalmaz. ("Taşınabilir" derken bunu kastettiğini varsayıyorum)

Ayrıca kullanıcının okumak için başını yana çevirmesi gerekmez. :)

Güncelleme

Bu iş parçacığı bunu jQuery ile yapmakla ilgilidir.


1
Sola / sağa döndürmenin daha az okunabilir olduğunu gösteren bir çalışma var
Édouard Lopez

14

Orijinal cevapta bir alıntı var ve IE8 satırında bunu noktalı virgülün hemen yanında atan önceki cevabım var. Yikes ve BAAAAD! Aşağıdaki kodun rotasyonu doğru ayarlanmış ve çalışıyor. Filtrenin uygulanması için IE'de yüzmeniz gerekir.

<div style = "
    şamandıra: sol; 
    konum: göreceli;
    -moz-dönüşümü: döndürme (270deg); / * FF3.5 + * /        
    -o-dönüşümü: döndürme (270deg); / * Opera 10.5 * /   
    -webkit-dönüşümü: döndürme (270deg); / * Saf3.1 +, Chrome * /              
    filtre: progid: DXImageTransform.Microsoft.BasicImage (rotasyon = 3); / * IE6, IE7 * /          
    -ms-filtresi: progid: DXImageTransform.Microsoft.BasicImage (rotasyon = 3); / * IE8 * /           
"
> Sayım ve Değer </div>;

5
Bunun IE'de çalışması için float gerekliliğine işaret eden +1.
RET

4

İki saatten fazla bir süredir denedikten sonra, şimdiye kadar bahsedilen tüm yöntemlerin tarayıcılarda veya tarayıcı sürümlerinde bile IE için çalışmadığını rahatlıkla söyleyebilirim ...

Örneğin (en çok oy verilen cevap):

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

IE9'da iki kez, bir filtre için ve bir kez -ms-filtresi için döner, bu yüzden ...

Belirtilen diğer tüm yöntemler, en azından, en yüksek öğenin boyutuna otomatik olarak ayarlanması gereken tablo başlığı hücresinin (arka plan rengiyle) sabit yüksekliğini / genişliğini ayarlamanız gerekmediğinde çalışmaz.

Bu yüzden, gerçekten evrensel olarak çalışan tek yöntem olan Nathan Long tarafından önerilen sunucu tarafı görüntü oluşturmayı detaylandırmak için, burada genel bir işleyici (* .ashx) için VB.NET kodum:

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

Unutmayın, bu bölümün

        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

ile değiştirilebilir

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

geliştirme sunucusunda çalıştığı için, aynı kodun bir Windows 2003 IIS 6 sunucusuna dağıtırsanız Generic GDI + istisnası atmayacağını varsaymakla kesinlikle yanılıyorsunuz ...

sonra şu şekilde kullanın:

<img alt="bla" src="GenerateImage.ashx?no_cache=123&text=Hello%20World&rotate=true" />

Ancak bu, evrensel olarak taşınabilir olmayan VB.NET'e bağlıdır. (Ama en azından sorunu istemcilerden sunucuya kaydırır.)
Florian Jenn

@Florian Jenn: Evet, VB.NET kodu VB.NET'e bağlıdır ancak aynısını PHP veya Phyton veya Ruby veya whater ile de yapabilirsiniz :) Bu arada, onu C # 'a dönüştürün ve mono üzerinde çalışmasına izin verebilirsiniz. Linux veya Mac veya Solaris.
Stefan Steiger

4

Topluluğa ilk katkım, örneğin basit bir metni ve bir tablonun başlığını yalnızca html ve css kullanarak döndürmek gibi.

görüntü açıklamasını buraya girin

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);
}

İşte jsfiddle'da bir örnek


Şu anda jsfiddle yerine bir kod parçacığı kullanılması tavsiye edilmektedir.
matsjoyce

Doğru anlarsam, bunlar Álvaro G.Vicario'nun çözümüyle karşılaştırıldığında güncel CSS kuralları mı?
Florian Jenn

@matsjoyce pasajında ​​çok fazla hata var ve işin
boşa çıkmasına neden olmak için araya giriyor

1
Bu cevap sadece kare hücreler için geçerlidir .. dikdörtgen hücreler için parçalanır jsfiddle.net/a2uxgm44/156
Rajshekar Reddy

3

IE filtreleri ve CSS dönüşümleri ( Safari ve Firefox ).

IE'nin desteği en eskisidir, Safari'nin 3.1.2'de [en azından biraz?] Desteği vardır ve Firefox 3.1'e kadar desteklenmeyecektir.

Alternatif olarak, Canvas / VML veya SVG / VML karışımını tavsiye ederim. (Canvas'ın daha geniş desteği vardır.)


Göz kapaksızlığına katılıyorum. Hepsi şu anda bir "hack". Prime-time için pek hazır değil.
Diodeus - James MacFarlane

2

İşte bazı sunucu tarafı işlemlerinde düz metin için çalışan bir tanesi:

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>";
}

bu da şöyle bir şey verir:

<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/


1

Font Awesome kitaplığını kullanıyordum ve bu etkiyi herhangi bir html öğesine aşağıdakileri yapıştırarak gerçekleştirebildim.

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

Kilometreniz değişebilir.


1

Başka bir çözüm:

(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);

}) ();

Bunun oldukça hack olduğunu kesinlikle kabul ediyorum, ancak css'nizi şişirmekten kaçınmak istiyorsanız bu basit bir çözüm.


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*/

0

Şuna bir bakın, bunu IE 7 için bir çözüm ararken buldum.

sadece css titreşimleri için tamamen harika bir çözüm

Ruh için teşekkürler aiboy

bağlantı burada

ve işte bu bağlantı miyavlamasına rastladığım yığın taşma bağlantısı

         .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;

            }
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.