使用 CSS 像增强现实这样的 3D 变换将图像定位 <div>

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/

有帮助吗？

使用 CSS 像增强现实这样的 3D 变换将图像定位 <div>

Position <div> over image with CSS 3D transforms like augmented reality

css

css-transforms