Ankündigung

Einklappen
Keine Ankündigung bisher.

Jquery Rotate und Klicken in Chrome

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Jquery Rotate und Klicken in Chrome

    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:
    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);
    CSS:
    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>

  • #2
    Falls es jemanden interessiert: Ich habe den Fehler gefunden. Wenn ich den Link vor den div setze funktionierts auch in Chrome...

    Kommentar

    Lädt...
    X