Я вижу, что в классе карт вы используете непрозрачность: 0,3. Эта непрозрачность создает проблему. Вы можете узнать больше об этом ниже ссылки
введите описание ссылки здесь
введите описание ссылки здесь
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>