我正在尝试找到一种在以给定 Angular 放置的照片元素之上映射元素的方法。笔记本电脑的照片就是一个很好的例子，我想在屏幕顶部映射一个元素(视频、图像或其他)，例如循环播放视频等。
这个任务看起来很简单，但我发现它非常棘手，因为我找不到如何通过变换、旋转、缩放、平移甚至倾斜来正确解决它。
这是我想要实现的代码示例，over 元素是绿色的 SPAN
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<span></span>
<img src="http://www.thesugarrefinery.com/wp-content/uploads/2015/08/sugar-macbook-7-5-perspective.png" />
</div>
</body>
</html>
CSS:
div {
position: relative;
}
span {
background: green;
width: 350px;
height: 200px;
position: absolute;
top: 0;
left: 0;
perspective: 250px;
transform: rotateX(0deg) rotateY(40deg) rotateZ(0deg) skewX(-10deg) translateX(220px) translateY(25px) scale(.94);
opacity: 0.5;
}
img {
width: 500px;
height: auto;
}
代码片段:
div {
position: relative;
}
span {
background: green;
width: 350px;
height: 200px;
position: absolute;
top: 0;
left: 0;
perspective: 250px;
transform: rotateX(0deg) rotateY(40deg) rotateZ(0deg) skewX(-10deg) translateX(220px) translateY(25px) scale(.94);
opacity: 0.5;
}
img {
width: 500px;
height: auto;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>
<span></span>
<img src="/image/iL2xf.png" />
</div>
</body>
</html>最佳答案
perspective 需要添加到父级，而不是子级。其余细节:
span {
background: green;
width: 256px;
height: 176px;
position: absolute;
top: 0;
left: 0;
transform: rotateX(1deg) rotateY(-7deg) rotateZ(-1deg) skew(-11.25deg, 1.5deg) translate(233px, 37px);
opacity: 0.5;
}
div {
position: relative;
perspective: 400px;
width: 1200px;
}
img {
width: 500px;
height: auto;
}
body {
overflow-x: hidden;
}<div>
<span></span>
<img src="/image/iL2xf.png" />
</div>关于css - 如何使用 css 透视将元素定位在正确的 3d 位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48777549/