时间戳

首页 > 解决方案 > 如何使用 CSS translateZ？

html - 如何使用 CSS translateZ？

问题描述

我正在尝试在 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>

标签： htmlcss

解决方案

当您的 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)`;
});

推荐阅读