Passe o mouse Inverter imagem

1402 ledoc

Abrir no Editor Publique Seu Código

Recomendado

20 June 2025

Cartões de links de mídia social HTML

3 January 2025

Um código por adonis1887

7 January 2024

HTML

<!DOCTYPE>
<html 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>flip-image</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>

.flip-container {
 perspective: 1000;
}

.flip-container:hover .flipper, .flip-container.hover .flipper {
 transform: rotateY(180deg);
}
.flip-container, .front, .back {
 width: 320px;
 height: 252px;
 float:left;
}

.flipper {
 transition: 0.6s;
 transform-style: preserve-3d;
 position: relative;
}

.front, .back {
 backface-visibility: hidden;
 position: absolute;
 top: 0;
 left: 0;
}

.front {
 z-index: 2;
 /* for firefox 31 */
 transform: rotateY(0deg);
}
.myimg {
 width:200px;
 height:200px;
}
.myimg img {
 width:100%;
 margin:auto;
}
.wrapper {
 padding:20px;
 margin:auto;
 background:#666666;
 overflow:auto;
}
.container {
 margin:auto;
 padding:10px;
 background:#999999;
 overflow:auto;
}

.back {
 transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="wrapper">
  
  <div class="container">
    
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
     
      <div class="flipper">
        
        <div class="front">
         
          <img class="myimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRz_oKTavtwqYDaiKbeBmcCmaKYcwsmGxE-UcYPgLKP81MRgQ3HGIhWXJ8MTd0s6sAp1dU&usqp=CAU"> </div>
        
        <div class="back">
          
          <img class="myimg" src="https://i.pinimg.com/736x/7a/35/39/7a35391475b5f9cdba0e33e4e6715692.jpg"> </div>
        
      </div>
      
    </div>
   
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
      
      <div class="flipper">
      
        <div class="front">
          
          <img class="myimg" src="https://i.pinimg.com/originals/7a/e0/9c/7ae09c5fdc7af8debb6adadced49b412.jpg"> </div>
        
        <div class="back">
         
          <img class="myimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRt26D5EJlIzUYvnG1x6kfxiPgQ19_naAVJgzM1mvUakzJu2d8tO9nSTpNcyhC7Ncqc-Nw&usqp=CAU"> </div>
       
      </div>
      
    </div>
  
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
     
      <div class="flipper">
       
        <div class="front">
          
          <img class="myimg" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRduEbAhiF2jwtqHKYxOMwc6SaezzLoPOyjdySQDJGy9X-V5zzta3GBZINDQYYrhvKPGEg&usqp=CAU"> </div>
        
        <div class="back">
         
          <img class="myimg" src="https://pics.craiyon.com/2023-11-07/381557f8effd4b64902860b1d3d1e782.webp"> </div>
      </div>
      </div>
      </div>
  </div>
</body>
</html>

Passe o mouse Inverter imagem

Recomendado

Cartões de links de mídia social HTML

Um código por adonis1887

HTML

CSS

JS

Recomendado

Cartões de links de mídia social HTML

Um código por adonis1887

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS