Safari transform rotate 不兼容问题及解决

最新推荐文章于 2023-06-07 16:40:06 发布

转载最新推荐文章于 2023-06-07 16:40:06 发布 · 3.7k 阅读

在移动端写 CSS3 时，Safari 上使用 transform:rotateY 等与 rotate 有关的属性会出现显示问题，如图片不见或缺角。通过在父类元素上添加 perspective 属性可解决该问题，perspective 能定义 3D 元素距视图的距离，使子元素获得透视效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自：https://lunashu.org/safari-transform-rotate-bu-jian-rong-wen-ti-ji-jie-jue/

移动端写CSS3 时发现在safari 上一个元素使用了 transform:rotateY(19deg); 显示有问题。当然不仅仅是 rotateY，所有跟rotate有关的都有可能出现问题，当然包括rotate3d。
比如这样

.css {
	-webkit-transform: rotateX(-33deg) rotateY(-50deg);
	transform: rotateX(-33deg) rotateY(-50deg);
}

这是正常状态的表现：

这是不正常的表现：

以及页面滚动时：

问题出现了，图片不见了，就算可见也是缺一角！
于是寻求baidu google。。。。终于看到了相似问题

试着在父类元素上添加 perspective
先来看看它的介绍

定义和用法
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。

于是乎我在父级元素加入perspective

.father {
    transform: perspective(400px);
    // 为啥是400？ 因为animate.css中flipInX用到的就是400；我这里是引用了 animate.css 所以 根据它的设定我也设定了400
}

然后。。。你去看看吧。。。反正就是。。。解决了！没毛病！