Survol de la souris Retourner l'image

Ouvrir dans l'éditeur Publiez votre code

Recommandé

15 May 2025

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

Survol de la souris Retourner l'image

Recommandé

Générateur de mot de passe

Un code par slowlogic992

Site Web météo

HTML

CSS

JS

Recommandé

Générateur de mot de passe

Un code par slowlogic992

Site Web météo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS