I'm attempting to create a new layer of content with CSS, but I'm having trouble adjusting the depth of the element using the translateZ property. I tried using some codepen code to achieve a 3D effect.
Below is the HTML, CSS, and Javascript code.
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>