html - 如何使用 CSS 变换将 div 放入 3D 图像

Question

我找不到可以做到这一点的工具，所以我问自己如何做到这一点。

我有一张笔记本电脑的图像：

我想在笔记本电脑屏幕内放置一个 div 以正确透视。

这样做的方法是什么？我可以使用一些数学来画线并计算正确的变换吗？我想让这个 div 靠近笔记本电脑的框架。

我试图通过实验来做到这一点，但转换并不完全正确。 注意： * 我不确切知道 rotate3D 是如何工作的，我只是对其进行调整，直到看起来正确为止，我想知道我应该如何更改 rotate3D 以便适用于这种情况，并且对于需要类似东西的其他人很有用。

下面的代码并不完全正确，我尝试将我的代码从 CodePen 放到 Stack Snippets 但代码更改取决于页面的宽度，并且在您编辑和运行代码段时会有所不同。要查看我的确切代码，请查看帖子末尾的 CodePen 演示。

body {
    margin: 0;
}
.laptop {
    background: url(https://i.stack.imgur.com/8xU2w.jpg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 100vw;
    height: 600px;
}

#screen {
    background: red;
    position: absolute;
    left: 50%;
    width: 357px;
    transform: rotate3d(1, 5, 2, 347deg)
        translatex(-50%);
    transform-style: preserve-3d;
    top: 116px;
    margin-left: -41px;
    height: 251px;
}

<div class="laptop">
    <div id="screen"></div>
</div>

对于这种特殊情况，我会有一个答案，但是对于未来的读者来说，如果有一个关于如何解决这个问题并将 div 放入 3D 图像的通用算法（步骤）会很好。

我想拥有真正的 3D，而不是像回答Match image perspective With css 3D transform那样的剪辑路径。我不想使用剪辑路径，因为我想将真实的东西匹配到屏幕上。我想把终端模拟器屏幕放在那里看到Codepen，匹配非常接近，但我想知道如何让它完全一样。

标签： htmlcss3dcss-transforms