在CSS中为三维平面上的子元素设置正确的透视

我有一个SVG六边形网格以45度的角度倾斜。在单独的六角体上，我想放置图像（由红色矩形表示），这些图像看起来与网格的平面垂直。图像/矩形不一定必须是完全90度，但我最难让它们具有与平面稍有不同的透视效果

有没有一种方法可以取消子元素的透视图设置，或者以某种方式重新处理CSS转换以使其看起来正确

代码

。显示{
动画：显示闪烁100ms立方贝塞尔（.37,0,41,1.74）100ms 1正常向前；
-webkit动画：显示闪烁100ms立方贝塞尔（.37,0,41,1.74）100ms 1正常向前；
背景：#000；
显示：块；
左边框：0.25rem实心#000；
右边框：0.25rem实心#000；
框大小：边框框；
-moz框大小：边框框；
高度：480px；
溢出：隐藏；
宽度：1096px；
}
#六边形网格{
框大小：边框框；
-moz框大小：边框框；
显示：块；
身高：100%；
-webkit变换：透视（44vw）旋转（45度）缩放3D（1.6,1.6,1.6）；
-moz变换：透视（44vw）旋转（45度）缩放3D（1.6,1.6,1.6）；
-ms变换：透视（44vw）旋转（45度）缩放3D（1.6,1.6,1.6）；
-o变换：透视（44vw）旋转（45度）缩放3D（1.6,1.6,1.6）；
变换：透视（44vw）旋转（45度）缩放3D（1.6,1.6,1.6）；
变换样式：保留-3d；
宽度：100%；
}
.hexContainer{
大纲：无；
变换样式：保留-3d；
}
海克斯先生{
框大小：边框框；
-moz框大小：边框框；
显示：内联块；
高度：4.4vmin；
不透明度：1；
大纲：无；
位置：相对位置；
冲程：#0CF；
笔划宽度：0.0625rem；
变换：scale3d（1,1,1）；
过渡：所有线性300ms；
宽度：8vmin；
}
.十六进制打开{
填充：rgba（0，204，255，0.3）；
}
.十六进制{
填充：url（#blockedHexPattern）；
填充不透明度：0.3；
}
.hexContainer:focus.open、.hexContainer:hover.open{
光标：指针；
填充：rgba（0，204，255，0.8）；
大纲：无；
}
.hexContainer:focus.blocked，.hexContainer:hover.blocked{
光标：指针；
填充：url（#blockedHexPattern）；
填充不透明度：1；
大纲：无；
}
.hexContainer:focus.Occessed，.hexContainer:hover.Occessed{
光标：指针；
填充物：rgba（50,50,50,0.8）；
大纲：无；
}
.hexContainer:focus.open、.hexContainer:focus.open.unblock{
变换原点：50%0%；
}
.hexContainer:焦点。已阻止{
不透明度：1；
变换原点：50%0%；
}
.hexContainer.active.open{
填充：rgba（0，204，255，0.8）；
不透明度：1；
}
#块状六边形线{
冲程：#0CF；
笔划宽度：0.0625rem；
}
#六边形网格{
变换：旋转（0度）；
}

---

SVG还不支持3D转换；即使您可以转换

.hexGrid

svg元素（它仍然在html上下文中，因此接受3D转换），它的内容也会平躺在里面，没有任何

转换样式可以扭转这种行为

最好的办法是将每个六边形作为自己的SVG元素，这样它们就可以分别在3D中进行转换。比如：

<div class="hexGrid" style="{3d transform}">
    <svg class="hex" style="{reversed 3d transform}">
        <polygon />
        <rect />
    </svg>
    <svg class="hex">
        ...
    </svg>
</div>


...

您还将HTML标记与SVG标记混合使用：
在SVG中不存在。您可以在任何元素上使用
xlink:href
属性。
由于无法在svg元素上正确处理3d变换，我建议使用不同的六边形网格方法。它可以通过简单的html和css实现，如本问题所示：

这允许使用在子元素上进行三维变换

根据您的用例进行调整，它可以如下所示：



正文{
背景：rgb（123、158、158）；
透视图：500px；
}
#类别{
宽度：70%；
保证金：0自动；
变换：旋转（45度）；
变换样式：保留-3d；
}
#类别：后{
内容：“；
显示：块；
明确：两者皆有；
}
#李类{
位置：相对位置；
列表样式类型：无；
宽度：17.364%；/*=（100-4.5）/5.5*/
填充底部：20.05%；/*=宽度/0.866*/
浮动：左；
溢出：隐藏；
可见性：隐藏；
变换：倾斜旋转（-60度）（30度）；
}
#li类：第n个孩子（10n+6），#li类：第n个孩子（10n+7），#li类：第n个孩子（10n+8），#li类：第n个孩子（10n+9），#li类：第n个孩子（10n+10）{
利润率最高：-4.2%；
利润底部：-4.2%；
变换：translateX（50%）旋转（-60度）倾斜（30度）；
}
#li类：第n个孩子（10n+6）{
左边距：0.5%；
}
#li类：第n个孩子（5n+2）{
左缘：1%；
保证金权利：1%；
}
#类别li:n个孩子（5n+3），#类别li:n个孩子（5n+4）{
保证金权利：1%；
}
#李科{
位置：绝对位置；
能见度：可见；
宽度：100%；高度：100%；
文本对齐：居中；
颜色：#fff；
溢出：隐藏；
变换：倾斜（-30度）旋转（60度）；
背景色：rgba（0,0,0,2）；
过渡：背景色。3s；
左边框：2倍实心#000；
右边框：2倍实心#000；
框大小：边框框；
-webkit背面可见性：隐藏；
}
#类别li div:悬停，#类别。向上：悬停范围：af