Preserve-3d不会影响Firefox上的子节点

问题描述

目标：悬停可将卡片翻转为平面视图。

问题：使用“变换样式：preserve-3d;”时，悬停不适用于子节点在Firefox上

我发现的替代解决方案： 我可以创建“隐形块”，并使用一些JS，无需使用“ hover”伪函数即可操纵卡的CSS。需要更多的编码，可能会导致一些UX问题，但确实可以。

有人可以帮我吗？

body { //Used as parent container
   display: inline-flex; //Align across the window
   -webkit-transform: perspective(900px); //Set 'depth' of 3D enviroment
   transform-style: preserve-3d; //Indicate the envroment as 3D - default: flat
   -webkit-transform-style: preserve-3d; 
   -moz-transform-style: preserve-3d;
}

.card { //Immediate parent must have "prespective" and "preserve-3d" set
    transform: rotatex(75deg) translatey(-200px) translatez(-100px); 
    Box-shadow: 0px 20px 60px rgba(0,0.5);
    transition:.6s;

    &:hover {
      transform: rotatez(0deg) rotatex(0deg);
      transition:.6s;
      Box-shadow: 0px 20px 40px 10px rgba(0,0.1);
    }
  }

https://codepen.io/serdeljac/pen/Vwazyga

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）