CSS动画：TranslateZ不能应用于div内的文本

我正在尝试将

transform:translateZ（50px）

应用于

h

，

p

标记，因为我使用的是

transform-style:preserve-3d

，所以它看起来应该是浮动的。当我检查

h

和

p

标记时，它看起来是浮动的，但不是文本。请参阅此笔以了解更多信息

HTML:

---

我看到在卡片类中，您使用的是不透明度：0.3。这种不透明性正在制造问题。您可以从以下链接了解更多信息

var mouse\u monitor=函数（e）{
var x=e.pageX；
var y=e.pageY；
var aX=（（window.innerWidth/2）-x）/30；
变量aY=（（窗口内部高度/2）-y）/10；
转换（-aX，aY，document.getElementById（'moveContainer'）；
}
函数变换（aX、aY、ele）{
ele.style=“transform:rotateX（+aY+”deg）rotateY（+aX+”deg）”；
}
window.onload=函数（）{
这个.addEventListener（'mousemove'，mouse\u monitor）；
}

正文{
背景：#000；
-webkit透视图：1000px；
透视图：1000px；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
显示：-网络工具包盒；
显示器：flex；
保证金：0；
高度：100vh；
}
.卡片{
高度：500px；
宽度：500px；
保证金：自动；
背景：#47344b；
显示器：flex；
边界半径：4px；
变换样式：保留-3d；
}
.按钮主{
最小宽度：150px；
填充物：5px10px；
最小宽度：150px；
填充物：5px10px；
变换样式：保留-3d；
背景#ba00da；
显示：内联；
}
.按钮主跨距{
转换：translate3d（0px，0px，50px）；
}
.卡片内容{
保证金：自动；
文本对齐：居中；
变换样式：保留-3d；
颜色：白色；
}
.卡片内容h1{
变换：translateZ（100px）；
}
.卡片内容{
变换：translateZ（50px）；
}

文件
中心文本
样本木瓜图

我发现在card类中，您使用的是不透明度：0.3。这种不透明性正在制造问题。您可以从以下链接了解更多信息

var mouse\u monitor=函数（e）{
var x=e.pageX；
var y=e.pageY；
var aX=（（window.innerWidth/2）-x）/30；
变量aY=（（窗口内部高度/2）-y）/10；
转换（-aX，aY，document.getElementById（'moveContainer'）；
}
函数变换（aX、aY、ele）{
ele.style=“transform:rotateX（+aY+”deg）rotateY（+aX+”deg）”；
}
window.onload=函数（）{
这个.addEventListener（'mousemove'，mouse\u monitor）；
}

正文{
背景：#000；
-webkit透视图：1000px；
透视图：1000px；
-webkit变换样式：保留-3d；
变换样式：保留-3d；
显示：-网络工具包盒；
显示器：flex；
保证金：0；
高度：100vh；
}
.卡片{
高度：500px；
宽度：500px；
保证金：自动；
背景：#47344b；
显示器：flex；
边界半径：4px；
变换样式：保留-3d；
}
.按钮主{
最小宽度：150px；
填充物：5px10px；
最小宽度：150px；
填充物：5px10px；
变换样式：保留-3d；
背景#ba00da；
显示：内联；
}
.按钮主跨距{
转换：translate3d（0px，0px，50px）；
}
.卡片内容{
保证金：自动；
文本对齐：居中；
变换样式：保留-3d；
颜色：白色；
}
.卡片内容h1{
变换：translateZ（100px）；
}
.卡片内容{
变换：translateZ（50px）；
}

文件
中心文本
样本木瓜图

谢谢你的提示，但我一直在这里寻找类似这样的效果：，尽管我使用了相同的样式，但没有得到我想要的浮动效果。“我无法找出我遗漏了什么。@KishoreL我已更新了我的答案。你现在可以查一下。不透明度在代码中造成了问题。如果这对你有意义，请接受答案。谢谢你的提示，但我在这里寻找类似的效果：，尽管我使用了相同的样式，但没有得到我想要的浮动效果。“我无法找出我遗漏了什么。@KishoreL我已更新了我的答案。你现在可以查一下。不透明度在代码中造成了问题。如果你觉得有道理，请接受答案。

<div class="card" id="moveContainer">
<div class="card-content">
  <h1>Center Text </h1>
  <p>Sample papagraph</p>
</div>
</div>

 body {
  background: #000;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  display: -webkit-box;
  display: flex;
  margin: 0;
  height: 100vh;
}

.card {
  height: 500px;
  width: 500px;
  margin: auto;
  background: #efaefa;
  opacity: 0.3;
  display: flex;
  border-radius: 4px;
  transform-style: preserve-3d;
}

.button-primary {
  min-width: 150px;
  padding: 5px 10px;
  min-width: 150px;
  padding: 5px 10px;
  transform-style: preserve-3d;
  background: #ba00da;
  display: inline;
}

.button-primary span {
  transform: translate3d(0px, 0px, 50px);
}

.card-content {
  margin: auto;
  text-align: center;
  transform-style: preserve-3d;
}

.card-content h1 {    
  transform: translateZ(50px);
}

.card-content p {
  transform: translateZ(50px);
}