Alles funktioniert in Firefox und im Edge bestens, das Bild dreht sich auch im Chrome und das andere erscheint, aber in Chrome funktionieren die Links nicht mehr. Google Suche konnte mir leider auch nicht weiterhelfen.
Mein Code:
CSS:
Mein Code:
Code:
(function($){ var isTouch = document.createTouch !== undefined, evt_hover = (isTouch)? 'touchstart' : 'mouseover', evt_out = (isTouch)? 'touchend' : 'mouseout'; $.fn.extend({ mflip: function(){ return this.each(function(){ var $f = $(this), $c, rotation = $f.data('rotation'); $f.html('<div class="m-flip__content">'+ $f.html() +'</div>'); $c = $('.m-flip__content', $f); // Event: Rollover / Touchstart $f.bind(evt_hover, function(){ if( isNaN(rotation) ){ $c.addClass('active'); } else { $c.css({ '-webkit-transform': 'rotateY('+ rotation +'deg)', '-moz-transform': 'rotateY('+ rotation +'deg)', 'transform': 'rotateY('+ rotation +'deg)' }); } // Event: Rollout / Touchend }).bind(evt_out, function(){ if( isNaN(rotation) ){ $c.removeClass('active'); }else{ $c.css({ '-webkit-transform': 'rotateY(0deg)', '-moz-transform': 'rotateY(0deg)', 'transform': 'rotateY(0deg)' }); } }); }); } }); })(jQuery);
HTML-Code:
.m-flip { -moz-perspective: 1000; -webkit-perspective: 1000; perspective: 1000; float:left; margin:0; padding:0; display:block; width:200px; height:200px; } #Bildgross .m-flip { transform-style: preserve-3d; -moz-perspective: 1000; -webkit-perspective: 1000; perspective: 1000; float:left; margin:0; padding:0; display:block; width:380px; height:380px; } .m-flip { -moz-perspective: 1000; -webkit-perspective: 1000; perspective: 1000; } .m-flip, .m-flip .front, .m-flip .back { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 250px; height: 250px; } .m-flip .m-flip__content { -moz-transition: 0.6s; -o-transition: 0.6s; -webkit-transition: 0.6s; transition: 0.6s; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .m-flip .m-flip__content.active, .m-flip .m-flip__content:hover { -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .m-flip .front, .m-flip .back { position: absolute; top: 0; left: 0; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .m-flip .front { z-index: 2; } .m-flip .back { -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
HTML-Code:
<div class="box m-flip"><div class="m-flip__content"><div id="Designs" class="front"><a href="link"><img src="bild1.png" class="DesignBild"></a></div> <div id="Designs" class="back"><a href="link"><img src="bild2.png" class="DesignBild"></a></div></div></div>
Kommentar