CSS 跨浏览器问题 - 旋转不适用于 Safari 和 Ipad 以及 Iphone

Question

我想要竖排文本，我正在使用转换属性来实现。但是我无法让它在 Safari 和 iPhone / IPad 上运行。

有人能帮忙吗？

页面是：http://www.hydrossolutions.com/

h3.aviaccordion-title {
        -webkit-transform-style: preserve-3d;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

-webkit-transform: translateY(90deg);
-webkit-transform-origin:left bottom 0;

-moz-transform: translateY(90deg);
-moz-transform-origin: left bottom 0;

-ms-transform: translateY(90deg);
-ms-transform-origin:left bottom 0;

-o-transform: translateY(90deg);

transform: translateY(90deg);
transform: rotate(90deg);
transform-origin: left bottom 0;

padding:0 !important;
margin:0 !Important;
white-space: nowrap !Important;
display: block;
}

Answer 1

经过大量搜索，我发现我需要使用：webkit-transform: rotate(90deg); 而不是 -webkit-transform： translateY(90deg);

 h3.aviaccordion-title {

        -webkit-transform-style: preserve-3d;
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

        -webkit-transform: translateY(90deg);
        -webkit-transform: rotate(90deg);
        -webkit-transform-origin:left bottom;


        -moz-transform: translateY(90deg);
        -moz-transform-origin: left bottom;

        -ms-transform: translateY(90deg);
        -ms-transform-origin:left bottom;

        -o-transform: translateY(90deg);

        transform: translateY(90deg);
        transform: rotate(90deg);


        transform-origin: left bottom;

        padding:0 !important;
        margin:0 !Important;
        white-space: nowrap !Important;
        display: block;


    }

CSS 跨浏览器问题 - 旋转不适用于 Safari 和 Ipad 以及 Iphone

CSS cross browser issue - rotate not working on Safari and Ipad and Iphones

css

iphone

cross-browser

ipad

ios