CSS变换旋转和倾斜在Safari中不起作用

Posted 2023-03-14

【中文标题】CSS变换旋转和倾斜在Safari中不起作用

【英文标题】：css transform rotate and skew not working in safari

【发布时间】：2016-12-19 02:49:22

【问题描述】：

我正在尝试使用来自 webkit-transform 的旋转和倾斜来制作六边形网格。它在我的笔记本电脑上的 chrome 中运行良好，但在 safari 或当我使用手机上的 chrome 应用程序查看网站时不起作用。

这里是css和html用sn-p试试

.hexIn-1 
	display: block;
	width: 100%;
	height: 100%;
	background-color: #252839;
	color: #ffffff;
	overflow: hidden;
	-webkit-transform: skew(0deg, -30deg) rotate(60deg);
	-ms-transform: skew(0deg, -30deg) rotate(60deg);
	-moz-transform: skew(0deg, -30deg) rotate(60deg);
	-o-transform: skew(0deg, -30deg) rotate(60deg);
	transform: skew(0deg, -30deg) rotate(60deg);
	-webkit-transition: all 0.35s ease-in;
	-ms-transition: all 0.35s ease-in;
	-moz-transition: all 0.35s ease-in;
	-o-transition: all 0.35s ease-in;
	transition: all 0.35s ease-in;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

<a class="hexIn-1" href="/site/laefleif/about" target="_self">
  <h1> about </h1>
</a>

这是我电脑上 chrome 的样子：

它在我电脑上的 safari 中：

我在这里广泛寻找答案，但我发现的所有东西都不起作用。任何帮助将不胜感激！

【参考方案1】：

尝试将position 属性更改为relative 或带有overflow: hidden 的元素上的任何非静态属性。