html - 如何使用 CSS translateZ？

Question

我正在尝试在 CSS 中创建不同的内容层，但是 translateZ似乎没有修改元素的深度。我使用了一些 codepen 代码来制作 3d 效果。
这是 HTML、CSS 和 Javascript 代码。

let card = document.querySelector('.card');

document.addEventListener('mousemove', function(e) {
  let xAxis = (window.innerWidth / 2 - e.pageX) / 10;
  let yAxis = (window.innerHeight / 2 - e.pageY) / 5;
  card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
});

.area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    
    transform-style: preserve-3d;
    perspective: 1000px;
}
.card {
    margin: auto;
    justify-content: center;
    display: flex;
    flex-direction: column;
    width: 500px;
    height: 500px;
    background-color: red;

    transform-style: preserve-3d;
    transform: translateZ(50px); //not working
}
.card-content {
    margin: auto;
    width: 400px;
    height: 400px;
    background-color: blue;

    transform-style: preserve-3d;
    transform: translateZ(100px); //not working
}

<header id = "header" class = "NC17">
    <div class = "area">
        <div class = "card">
            <div class = "card-content"></div>
        </div>
    </div>
</header>

Answer 1

当您的 JS 执行时，它会将您的转换属性从“translateZ”更改为“rotateY 和 rotateX”。如果你想保留 translateZ 属性，你的 JS 应该是这样的:

let card = document.querySelector('.card');

document.addEventListener('mousemove', function(e) {
  let xAxis = (window.innerWidth / 2 - e.pageX) / 10;
  let yAxis = (window.innerHeight / 2 - e.pageY) / 5;
  card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg) translateZ(50px)`;
});