CSS跨浏览器问题 - 旋转不能在Safari和Ipad和Iphone上运行

Question

我想要垂直文本，并使用Transform属性来执行此操作。但是我无法在Safari和iphone / IPads上使用它。

有人可以帮忙吗？

页面为：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;


    }