1

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>

     

1 Resposta 1

0

Seu problema é que vc fez seu CSS os estilos no :hover. Porem no JS vc esta fazendo um toggle com a classe .hover. Vc está confundido as bolas provavelmente pq usou uma classe com o mesmo nome da pseudo-classe...

inserir a descrição da imagem aqui

Repare que é um método de "ativar"(toggle) a classe(classList) no click(onclick) e não um evento de hover

`onclick="this.classList.toggle('hover');"` <-- aqui 'hover' é o nome da classe 

Por exemplo, para corrigi basta que no CSS vc substitua onde está :hover por .hover. Pois é para trabalhar com a classe .hover.

Trocar de:

.vertical.flip-container:hover .back

Para:

.vertical.flip-container.hover .back

Veja como ficaria o código todo corrigido.

<!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>

<style>
/*  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);}
</style>
    </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" onclick="this.classList.toggle('hover');">  	
  				<div class="flipper">  	
  					<!-- Conteúdo da frente -->  	
   					 <div class="front">  	
      					<img src="https://placecage.com/100/100" alt="conquista" class="align-center">
    						</div>
    						<!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="https://placecage.com/101/100" 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="https://placecage.com/100/100" alt="conquista" class="align-center">
    						</div>
							   <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="https://placecage.com/101/100" 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="https://placecage.com/101/100" alt="conquista" class="align-center">
    						</div>
							     <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="https://placecage.com/100/100" 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="https://placecage.com/100/100" alt="conquista" class="align-center">
    						</div>
							    <!-- Conteúdo do verso -->  
							    <div class="back">
							    <img src="https://placecage.com/101/100" 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>
							
                        </div></div></div></div></div></div></div></div></div></div></div>
                        <!-- End Team Item -->
   </body>
</html>

7
  • Na verdade eu queria deixar somente com o flip na vertical. 14/01/2019 às 18:00
  • @CrisCredie eu não mexi no seu CSS praticamente, só fiz o ajuste para ativar e desativar no mobile quando vc clicar no elemento. Esse flip que está ai na verdade foi vc que fez assim... achei que era a forma como vc queria...
    – hugocsl
    14/01/2019 às 18:05
  • Sim, eu sei. Te agradeço muito a ajuda mais uma vez ;) 14/01/2019 às 18:09
  • @CrisCredie já achei o "erro" se é que vc quer só na vertical, é que vc colocou no CSS .vertical.flip-container junto um colado no outro, e tem que ter um epaço entre um nome e outro, assim: .vertical .flip-container separando a palavra .vertical e .flip-...
    – hugocsl
    14/01/2019 às 18:10
  • 1
    Muito obrigada mesmo @hugocsl... Realmente não havia percebido! 14/01/2019 às 18:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .