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;

    }