Boa tarde,
Criei uma versão de uma section para aparecer somente na versão tela pequena, um flip card, mas quando aberto no mobile, a animação não aparece, e fica estático. Alguém conseguiria me dar um help?
/* Responsive */
.horizontal {
display: block;
}
.vertical {
display: none;
}
@media (max-width:992px) {
.horizontal {
display: none;!important;
}
.vertical {
display: block;
}
}
/* ==============================
Flip Card
============================== */
/* continua a declaração de perspectiva para o container geral */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
/* MODIFICADO! vira os containers frente e verso quando o mouse passa em cima */
.flip-container:hover .back { transform: rotateY(0deg); }
.flip-container:hover .front { transform: rotateY(180deg); }
.flip-container, .front, .back {
width: 320px;
height: 330px;
}
/* define a velocidade da animação */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
/* esconde o verso durante a animação */
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* MODIFICADO! frente posicionada sobre o fundo */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* verso inicialmente escondido *
.back { transform: rotateY(-180deg); }
/* modificações para flip vertical */
.vertical.flip-container { position: relative; }
.vertical .back { transform: rotateX(180deg); }
.vertical.flip-container:hover .back { transform: rotateX(0deg); }
.vertical.flip-container:hover .front { transform: rotateX(180deg);}
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta charset="utf-8">
<meta name="author" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicons -->
<link rel="shortcut icon" href="images/favicon.png">
<!-- CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/vertical-rhythm.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/font.awesome.min.css">
<link rel="stylesheet" href="css/owl.transitions.css">
<link rel="stylesheet" href="css/simpletextrotator.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/style-responsive.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body class="appear-animate">
<div class="vertical">
<div class="row multi-columns-row alt-features-grid align-center ">
<!-- Flip Item -->
<div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
<div class="team-item align-center">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<!-- Conteúdo da frente -->
<div class="front">
<img src="images/tecnologia/conquista.png" alt="conquista" class="align-center">
</div>
<!-- Conteúdo do verso -->
<div class="back">
<img src="images/tecnologia/versoconquista.png" alt="conquista">
</div></div></div>
<!-- End Flip Item -->
<br>
<!-- Flip Item -->
<div class="row multi-columns-row alt-features-grid align-center ">
<div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<!-- Conteúdo da frente -->
<div class="front">
<img src="images/tecnologia/ativacao.png" alt="conquista" class="align-center">
</div>
<!-- Conteúdo do verso -->
<div class="back">
<img src="images/tecnologia/versoativacao.png" alt="ativacao">
</div></div></div>
<!-- End Team Item -->
<br>
<!-- Team Item -->
<div class="row multi-columns-row alt-features-grid align-center ">
<div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<!-- Conteúdo da frente -->
<div class="front">
<img src="images/tecnologia/rentabilizacao.png" alt="conquista" class="align-center">
</div>
<!-- Conteúdo do verso -->
<div class="back">
<img src="images/tecnologia/versorentabilizacao.png" alt="ativacao">
</div></div></div>
<!-- End Team Item -->
<br>
<!-- Flip Item -->
<div class="row multi-columns-row alt-features-grid align-center ">
<div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<!-- Conteúdo da frente -->
<div class="front">
<img src="images/tecnologia/retencao.png" alt="conquista" class="align-center">
</div>
<!-- Conteúdo do verso -->
<div class="back">
<img src="images/tecnologia/versoretencao.png" alt="ativacao">
</div></div></div>
<!-- End Team Item -->
<br>
<!-- Flip Item -->
<div class="row multi-columns-row alt-features-grid align-center ">
<div class="col-sm-4 col-md-4 col-lg-4 mb-sm-30 wow fadeInLeft">
<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
<!-- Conteúdo da frente -->
<img src="images/tecnologia/recuperacao.png" alt="conquista" class="align-center">
</div>
<!-- Conteúdo do verso -->
<div class="back">
<img src="images/tecnologia/versorecuperacao.png" alt="ativacao">
</div>
</div>
</div>
<!-- End Team Item -->
</body>
</html>