Почему не работает transition?

Question

[Janserik-Bay]

Помогите, не могу решать этот проблему. Вроде нет ошибки, но не могу видеть плавный переход когда настраиваю 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);
}

Answer 1

[Steppp]

задай position где и rotate