1. Weiterleitung zu NetzLiving.de
  2. Forum
    1. Unerledigte Themen
  3. zum neuen Forum
  • Anmelden
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Erweiterte Suche
  1. Informatik Forum
  2. Webmaster & Internet
  3. Entwicklung

CSS rotate3d

  • Spite82
  • 1. Oktober 2013 um 11:55
  • Unerledigt
Hallo zusammen,

das Informatik-Forum geht in den Archivmodus, genaue Informationen kann man der entsprechenden Ankündigung entnehmen. Als Dankeschön für die Treue bekommt man von uns einen Gutscheincode (informatikforum30) womit man bei netzliving.de 30% auf das erste Jahr sparen kann. (Genaue Infos sind ebenfalls in der Ankündigung)

Vielen Dank für die Treue und das Verständnis!
  • Spite82
    Punkte
    571
    Beiträge
    89
    • 1. Oktober 2013 um 11:55
    • #1

    Hallo ihr Profis :), ich habe ein Problem mit einer kleinen Webseite (und JS darin).
    Der angegebene Code sollte alles Relevante andecken, denke ich (außer, dass JQuery verwendet wird...).

    Aaaalso:
    Jetzt habe ich ein 'div.pin' Element, welches 2 Links enthält (eines davon mit Bild).
    Was ich im 'mousemove' - Event Handler machen will, ist, dass sich dieser 'pin' zu der Maus hin dreht. Und soweit funktioniert das auch.
    Nun aber zu meinem Problem:
    Meine Anchor - Elemente funktionieren nun leider nicht mehr, d.h. bei einem Click auf den Link oder das Bild passiert gar nichts.

    Hat jemand eine Ahnung, warum, bzw, wie man das hinbekommen kann?

    HTML
    <head>
    <style>
        div.pin{
            display: inline-block;
            margin: 10px;
            padding: 10px;
        }
    </style>
    <html>
    <script>
    $(document).ready(function() {
        $('#container').mousemove(function(e){
            ///Viewport Size
            var height = $(window).height();
            var width = $(window).width();
            ///Mouse Position
            var coordX = e.pageX - $(document).scrollLeft();
            var coordY = e.pageY - $(document).scrollTop();
            $('div.pin:visible').each(function(){
                ///Element Position
                var elemPosX = $(this).offset().left + $(this).width()/2.0 - $(document).scrollLeft();
                var elemPosY = $(this).offset().top + $(this).height()/2.0 - $(document).scrollTop();
                ///Normalized Mouse Position from the Element
                var relX = (coordX - elemPosX) / width;
                var relY = (coordY - elemPosY) / height;
                $(this).css({ rotate3d: -relY + ',' + relX + ',0,15deg' });
            });
        });
    });
    </script>
    </head>
    <body>
    <div id="container">
        <div class="pin">
            <a href="http://lorempixel.com"><img src="http://lorempixel.com/300/300" /></a>
            <a href="http://lorempixel.com"><strong><em>http://lorempixel.com</em></strong></a>
        </div>
    </div>
    </body>
    </html>
    Alles anzeigen

    Danke im Voraus! :)

  • Maximilian Rupp 27. Dezember 2024 um 00:26

    Hat das Thema aus dem Forum Programmieren nach Entwicklung verschoben.

  1. Datenschutzerklärung
  2. Impressum