@Janserik-Bay

Почему мой код не работают?

Вроде все сделал правильно, в 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');
    });
})
  • Вопрос задан
  • 103 просмотра
Пригласить эксперта
Ответы на вопрос 1
vighovhannisian
@vighovhannisian
student
Jquery скрипты подключи в боди и на самом низу,если у тебя тоже есть скрипты то внизу jquery должен быть над твоем скрипте,примерно так,
<script src=“jquery”></script>
<script src=“myScript”></script>
</body>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы