Вроде все сделал правильно, в codepen-не работают, а вот в обычным браузере отказываются нормально работать.
Когда я нажимаю на карточки, мой блок должен прийти на нормальную состаянию, но этого не происходить:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<script src="js/jquery-3.6.0.js"></script>
</head>
<body>
<div class="section">
<div class="container">
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
<div class="card"><img src="https://codyhouse.co/demo/3d-animated-mockup/img/cd-app-image.png" alt=""></div>
</div>
</div>
</body>
</html>
body {
margin: 0;
background-color: #3d385a;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.section {
perspective: 1000px;
}
.container {
width: 680px;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
transition: 3s;
transform: rotateX(43deg) rotateZ(-40deg) rotateY(20deg);
transform-style: preserve-3d;
}
.container-origin {
transform: rotate(0);
}
img {
max-width: 100%;
}
.card {
width: 200px;
margin: 10px;
transition: 0.3s;
}
.card:hover {
cursor: pointer;
transform: translateZ(10px);
}
$(document).ready(function () {
$('.card').on('click', function() {
$('.container').toggleClass('container-origin');
});
})
