CSS 跨浏览器问题 - 旋转在 Safari、Ipad 和 Iphone 上不起作用

Posted 2023-03-12

【中文标题】CSS 跨浏览器问题 - 旋转在 Safari、Ipad 和 Iphone 上不起作用

【英文标题】：CSS cross browser issue - rotate not working on Safari and Ipad and Iphones

【发布时间】：2015-09-14 11:36:57

【问题描述】：

我想要垂直文本并使用 Transform 属性来执行此操作。但是我无法让它在 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;

【问题讨论】：

Elements using CSS transitions do not appear on iPad/iPhone until inspected with Safari web inspector的可能重复

我已经在那个帖子上尝试过建议的解决方案，但它对我不起作用。

请问有人可以帮忙吗？ :(

【参考方案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;