时间戳

首页 > 解决方案 > CSS 动画：TranslateZ 不能应用于 div 内的文本

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

问题描述

我正在尝试应用transform:translateZ(50px),标签h，p因为我使用transform-style: preserve-3d. 当我检查h, 和p标签时，它似乎是浮动的，但不是文本。请在此处参考此笔以获得更清晰的信息。

HTML：

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

CSS：

 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);
}

标签： csscss-animations

解决方案

I am seeing that on card class, you are using opacity:0.3. That opacity is creating issue. you can read more about that from below links

enter link description here

enter link description here

var mouse_monitor = function(e) {
    var x = e.pageX;
    var y = e.pageY;

    var aX = ((window.innerWidth/2) - x) / 30;
    var aY = ((window.innerHeight/2) - y) / 10;

    transform(-aX, aY , document.getElementById('moveContainer'));
  }

  function transform(aX , aY, ele){
    ele.style = "transform: rotateX("+ aY+"deg) rotateY("+aX+"deg)";
  }

  window.onload = function() {
    this.addEventListener('mousemove', mouse_monitor);
  }
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: #47344b;
  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;
  color: white;
}

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

.card-content p {
  transform:translateZ(50px);
}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div class="card" id="moveContainer">
<div class="card-content">
  <h1>Center Text </h1>
  <p>Sample papagraph</p>
</div>
</div>
</body>
</html>

推荐阅读