html - 进行 3D 变换时如何修复元素大小变化？

Question

我正在尝试一些涉及 3D 旋转和变换的奇怪 CSS 效果来设置场景。这基本上是一个“菜单”。

HTML:每个

标签都包含一个文本标签，我在 CSS 中添加 :after 以插入图像。

问题:li 元素太大，我无法获取它“后面”的其他图像。插入的图像为 100x160，标签绘制在图像本身上，但

元素(根据检查员的说法)为 123.411 x 268.049。标签是 123.411x268.049(不知道为什么它在顶部和底部有巨大的边距)，图像显示为 123.411x197.458(由于我将它拉到前面的透视)。 197没问题。 268 浪费了 70 个像素……阻止访问下一张图像。

强制高度，即使通过 javascript 也无济于事。它只会改变位置(无论如何位置都是固定的)。我准备放弃，只是制作一个覆盖整个事物的可点击的大图像 map ，但如果不使用 javascript 会损害我的悬停效果。

Says it wants code to have a jsfiddle link, how stupid

更新:试试https://jsfiddle.net/6ut694yf/1/ (只是我正在做的一部分)并检查蜡烛的高度。为什么它比图像本身大这么多？悬停效果说明了问题。你需要一个大屏幕来使视口(viewport)足够宽，这样元素就不会相互重叠，因为我还没有为较小的屏幕添加缩放比例(移动设备将有一个完全不同的 CSS，因此这一切都在CSS 而不是 HTML)。

Answer 1

这不是一个好的答案，所以如果有人有更好的答案，请告诉我。我最终做的是制作一堆 div，我使用 CSS calc() 功能将它们放置在图像(一打)上，以便尝试使叠加层与图像显示对齐......记住它的 3D 透视图和屏幕上的大小完全一致，因此实际计算会非常紧张。甚至窗口高度也会影响水平位置，因为旋转的平面会改变大小。所以你最终得到这样的职位:

[data-item="incense"] {
  top: calc(42vh - 65px);
  left: calc(70vw - 25px - 12vh);
  height: calc(35px + 12vh);
  width: calc(170px + 6vh);
  z-index: 5002;
}

Z-index 让元素重叠，对空间中距离较近的对象使用较高的 Z-index。然后将这些元素添加到位置类，并在没有内容的情况下显示。有点 jQuery 这样做:

// hot is a temporary hack to correct 3D distortion of targets
    $(".hot").hover(function() {
            tagname = "#" + $(this).attr('data-item');
            $(tagname).addClass('hovered');
            $(tagname).trigger('mouseenter');
        }, function() {
            tagname = '#' + $(this).attr('data-item');
            $(tagname).removeClass('hovered');
            $(tagname).trigger("mouseleave");
        });
    $(".hot").click(function() {
            tagname = "#" + $(this).attr('data-item');
            $(tagname).trigger("click");
    });

使用“热”类(用于热点的清晰覆盖)的 div 的数据项属性将热点与被激活的实际元素 ID 联系起来。然后我添加了一些额外的 CSS 并创建了一个“.hovered”类来复制自然的 :hover 效果。