1. Dashboard
  2. Forum
    1. Unerledigte Themen
  3. Mitglieder
    1. Letzte Aktivitäten
    2. Benutzer online
    3. Team-Mitglieder
    4. Trophäen
    5. Mitgliedersuche
  4. Tutorial Bereich
  • Anmelden
  • Registrieren
  • Suche
Dieses Thema
  • Alles
  • Dieses Thema
  • Dieses Forum
  • Seiten
  • Forum
  • Lexikon
  • Erweiterte Suche
  1. Informatik Forum
  2. Webmaster & Internet
  3. Entwicklung

CSS rotate3d

  • Spite82
  • 1. Oktober 2013 um 11:55
  • Unerledigt
  • Spite82
    8
    Spite82
    Mitglied
    Reaktionen
    1
    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.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden

Rechtliches

Impressum

Datenschutzerklärung