我发现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)