如何使用css透视将元素定位在正确的3d位置答案

【问题标题】：How to position element in the correct 3d position with css perspective如何使用css透视将元素定位在正确的3d位置
【发布时间】：2018-02-13 23:50:13
【问题描述】：

我正在尝试找到一种方法来映射元素，在以给定角度放置的照片元素之上。笔记本电脑的照片就是一个很好的例子，我想在屏幕顶部映射一个元素（视频、图像或其他），例如，让我们循环播放视频等。

这个任务看起来很简单，但我发现它很棘手，因为我找不到如何通过变换旋转、缩放、平移甚至倾斜来正确解决它。

这是我想要实现的代码示例，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;
}

还有sn-p：

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="https://i.stack.imgur.com/iL2xf.png" />
  </div>
  
</body>
</html>

【问题讨论】：

标签： css webkit-perspective

【解决方案1】：

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="https://i.stack.imgur.com/iL2xf.png" />
</div>

【讨论】：

有道理！非常感谢！