Помогите, не могу решать этот проблему. Вроде нет ошибки, но не могу видеть плавный переход когда настраиваю rotateX().
<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 {
margin: 0;
background-color: #3d385a;
}
.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(60deg);
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);
}