相关疑难解决方法(0)

如果在属性末尾设置透视,CSS 3d 变换将不起作用

我发现transform财产取决于perspective()职位

为什么会发生这种情况?还有其他规则/限制吗transform

虽然我觉得很奇怪,但这似乎不是一个错误,因为我可以在 Chrome/FF 中重现它

box:nth-child(1):hover {
  transform: perspective(1000px) translate3d(0, 0, -100px);
}

box:nth-child(2):hover {
  transform: translate3d(0, 0, 100px) perspective(1000px);
}

box {
  padding: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  transition: transform .4s;
  background: rgba(255, 0, 0, 0.3);
  margin: 20px;
  font-size: 12px;
  perspective: 1000px;
  cursor: pointer;
}

box:nth-child(2) {
  background: rgba(0, 0, 255, 0.3);
}
Run Code Online (Sandbox Code Playgroud)
<box>
  transform: perspective(1000px) translate3d(0,0,100px);
</box>
<box>
  transform: translate3d(0,0,100px) perspective(1000px);
</box>
Run Code Online (Sandbox Code Playgroud)

css css-transforms

5
推荐指数
1
解决办法
1619
查看次数

标签 统计

css ×1

css-transforms ×1