代码之家 › 专栏 › 技术社区 › user500665

停止在苹果设备上通过父对象进行三维变换剪辑?

css

user500665 · 技术社区 · 7 月前

我有一个应用了三维旋转的按钮。这在桌面浏览器上有效,但在iphone/ipad上查看时,按钮会穿过父元素并将其切成两半。

我该如何防止这种情况发生?

设置示例:

section {
  background:grey;
  padding:20px;
  transform:translateY(10px);
}
a {
  display:inline-block;
  position:relative;
  z-index:1;
  background:red;
  color:#ffffff;
  padding:20px;
  transform:rotateY(45deg);
  transform-style:preserve-3d;
 }

<section>
  <p><a>Button</a></p>
</section>

1 回复 | 直到 7 月前

Hao Wu 7 月前

试着在Z轴上稍微抬高按钮,这样它就不会夹到背景中:

transform: translateZ(200px);

section {
  background: grey;
  padding: 20px;
  transform: translateY(10px);
}

a {
  display: inline-block;
  position: relative;
  z-index: 1;
  background: red;
  color: #ffffff;
  padding: 20px;
  transform: translateZ(200px) rotateY(45deg);
  transform-style: preserve-3d;
}

<section>
  <p><a>Button</a></p>
</section>

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前