Mobile flip card version

Asked

Viewed 110 times

1

Good afternoon,

I created a version of a Section to appear only in the small screen version, a flip card, but when opened in mobile, the animation does not appear, and becomes static. Someone could help me out?

/*  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>

mobile css-animations

1 answer

0


Your problem is that you made your CSS the styles in :hover. But in JS you’re making a toggle with class .hover. You are confused the balls probably because you used a class with the same pseudo-class name...

inserir a descrição da imagem aqui

Note that it is a method of "activating"(toggle) the class(classList) in the click(onclick) and not an event of hover

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

For example, to fix just replace where you are in CSS :hover for .hover. 'Cause it’s to work with the class .hover.

Trade:

.vertical.flip-container:hover .back

To:

.vertical.flip-container.hover .back

See how the whole code would look fixed.

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

  • Actually I wanted to leave only with the flip vertical.

  • @Criscredie I didn’t touch your CSS practically, I just made the adjustment to enable and disable in mobile when you click the element. That flip that’s there actually you did so... I thought it was the way you wanted it...

  • Yes, I know. I thank you so much for your help once again ;)

  • @Criscredie already found the "error" if you want only vertical, is what you put in CSS .vertical.flip-container I put one on the other, and it has to have a little piece between one name and the other, so: .vertical .flip-container separating the word . vertical and . flip-...

  • 1

    Thank you so much @hugocsl... I really hadn’t noticed!

  • Good morning, Hugo I also applied Flip to 7 home images, but when I reduce the screen (responsiveness) the images are all cramped and scrambled, one over the other, even applying margin and padding. Would you tell me if this effect is responsive or how to fix it, please?

  • @Paula will depend on your particular case. I suggest you open a new question, explain your situation there, and include the minimum code that to simulate your problem.

Show 2 more comments

Browser other questions tagged mobile css-animations

You are not signed in. Login or sign up in order to post.