Flip-Effekt ohne Transformieren oder Drehen

Question

Ich stamble auf diese Javascript flip effect Seite.

Wenn ich seine verschleierten source code inspiziere, kann ich css Eigenschaft transform oder rotate nicht finden.

Ich möchte wissen, wie der Flip-Effekt erreicht wird. Welche CSS-Eigenschaften sind beteiligt?

Answer 1

$(document).ready(function() { 
 
    /* The following code is executed once the DOM is loaded */ 
 

 
    $('.sponsorFlip').click(function() { 
 

 
    // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed): 
 

 
    var elem = $(this); 
 

 
    // data('flipped') is a flag we set when we flip the element: 
 

 
    if (elem.data('flipped')) { 
 
     // If the element has already been flipped, use the revertFlip method 
 
     // defined by the plug-in to revert to the default state automatically: 
 

 
     elem.revertFlip(); 
 

 
     // Unsetting the flag: 
 
     elem.data('flipped', false) 
 
    } else { 
 
     // Using the flip method defined by the plugin: 
 

 
     elem.flip({ 
 
     direction: 'lr', 
 
     speed: 350, 
 
     onBefore: function() { 
 
      // Insert the contents of the .sponsorData div (hidden 
 
      // from view with display:none) into the clicked 
 
      // .sponsorFlip div before the flipping animation starts: 
 

 
      elem.html(elem.siblings('.sponsorData').html()); 
 
     } 
 
     }); 
 

 
     // Setting the flag: 
 
     elem.data('flipped', true); 
 
    } 
 
    }); 
 

 
});

body { 
 
    /* Setting default text color, background and a font stack */ 
 
    font-size: 0.825em; 
 
    color: #666; 
 
    background-color: #fff; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
} 
 
.sponsorListHolder { 
 
    margin-bottom: 30px; 
 
} 
 
.sponsor { 
 
    width: 180px; 
 
    height: 180px; 
 
    float: left; 
 
    margin: 4px; 
 
    /* Giving the sponsor div a relative positioning: */ 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.sponsorFlip { 
 
    /* The sponsor div will be positioned absolutely with respect 
 
\t \t to its parent .sponsor div and fill it in entirely */ 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #ddd; 
 
    background: url("img/background.jpg") no-repeat center center #f9f9f9; 
 
} 
 
.sponsorFlip:hover { 
 
    border: 1px solid #999; 
 
    /* CSS3 inset shadow: */ 
 
    -moz-box-shadow: 0 0 30px #999 inset; 
 
    -webkit-box-shadow: 0 0 30px #999 inset; 
 
    box-shadow: 0 0 30px #999 inset; 
 
} 
 
.sponsorFlip img { 
 
    /* Centering the logo image in the middle of the .sponsorFlip div */ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    margin: -70px 0 0 -70px; 
 
} 
 
.sponsorData { 
 
    /* Hiding the .sponsorData div */ 
 
    display: none; 
 
} 
 
.sponsorDescription { 
 
    font-size: 11px; 
 
    padding: 50px 10px 20px 20px; 
 
    font-style: italic; 
 
} 
 
.sponsorURL { 
 
    font-size: 10px; 
 
    font-weight: bold; 
 
    padding-left: 20px; 
 
} 
 
.clear { 
 
    /* This class clears the floats */ 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://demo.tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/jquery.flip.min.js"></script> 
 

 
<div title="Click to flip" class="sponsor"> 
 
    <div class="sponsorFlip"> 
 
    <img alt="More about google" src="data:image/png;base64,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"> 
 
    </div> 
 

 
    <div class="sponsorData"> 
 
    <div class="sponsorDescription"> 
 
     The company that redefined web search. 
 
    </div> 
 
    <div class="sponsorURL"> 
 
     <a href="http://www.google.com/">http://www.google.com/ </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2