css - 使用 CSS 3D 变换将 定位在图像上，如增强现实

Question

我正在尝试定位 <div>在墙上的电视照片上方，所以它看起来像<div>在电视上。

我确信解决方案是使用 CSS 3D 转换等 perspective , perspective-origin , transform和 transform-origin .但是，我无法计算出这些取得良好结果的值，因为我正在反复试验 - 我不懂数学。

这是我的进步:

还有一个 jsfiddle:https://jsfiddle.net/2pye7nc2/

我正在设置容器的透视图:

perspective: 500px;
perspective-origin: 210px 382px;

并对其中的元素进行转换:

transform: translateX(153px) translateY(253px) translateZ(0) rotateX(-12deg) rotateY(-31deg) rotateZ(-20deg);
transform-origin: 0px 150px;

非常感谢您的帮助。

Answer 1

我能做的最好的:

.tv .tv-content {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.75;
    width: 392px;
    height: 356px;
    transform: translateX(193px) translateY(211px) translateZ(0) rotateX(-11deg) rotateY(-40deg) rotateZ(-19.5deg);
    transform-origin: 0px 150px;
    line-height: 300px;
    text-align: center;
    font-size: 32px;
    background-color: red;
    color: blue;
}

https://jsfiddle.net/Lzf2umzf/

这会有帮助吗？