问题描述
在下面的代码中，按钮不可见，因此不可点击，但它们没有转换。转换后的 SVG 元素会溢出按钮所在的位置。我曾尝试更改 z-index，但我了解到一旦发生透视变换，z 轴就不再重要了。
我想要做的就是在转换后剪辑 SVG，以防止它溢出到其他控件等。
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta http-equiv="X-UA-Compatible" content="IE=edge">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
</head>
<body style="background-color: #999;">
<label style="z-index: 0;" for="dd">Choose :</label>
<select style="z-index: 0;" name="dd" id="dd">
<option value="Foo">Foo</option>
<option value="Bar">Bar</option>
</select>
<input style="z-index: 0;" type="number" value="0"></input>
<button style="z-index: 0;" onclick="console.log('start clicked')">Start</button>
<button style="z-index: 0;transform: translateZ(0px);" onclick="console.log('stop clicked')">Stop</button>
<svg viewBox="0 0 600 800" style="z-index: -1;transform: perspective(300px) rotateY(10deg); background-color:cyan "
width="1280" height="800">
</svg>
</body>
</html>
解决方法
您可以将所有表单控件包装在一个 div 中，为其指定相对位置和 z-index 为 1，尽管您进行了变换，它仍会显示在 SVG 上方。然后你可以给那个 div 一个与页面背景匹配的背景，它看起来像 SVG 元素被剪裁了。
body {
margin: 0;
}
div {
position: relative;
z-index: 1;
background-color: #fff;
padding: 1rem;
}
svg {
z-index: -1;
transform: perspective(300px) rotateY(10deg);
background-color: cyan;
height: 800px;
width: 1280px
}<div>
<label for="dd">Choose :</label>
<select name="dd" id="dd">
<option value="Foo">Foo</option>
<option value="Bar">Bar</option>
</select>
<input type="number" value="0" />nii
<button>Start</button>
<button>Stop</button>
</div>
<svg width="1280" height="800">
</svg>