jQuery - rotateY je nach Elemente rechts oder links schweben

Question

Hier ist eine Geige mit meinem Code - https://jsfiddle.net/agon024/o9sa7nyh/5/

:hover{ 
    transform: perspective(800px) rotateY(25deg); 
    transition-timing-function: ease-in; 
    transition: all, 0.5s; 
} 

Was ich versuche zu tun, mein div-Element hat rotateY 25 Grad oder -25 Grad, je nachdem, ob von nicht bist du auf der linken oder rechten Seite des Bildes schweben.

Wie Sie in der Geige sehen können, wenn Sie den Mauszeiger darüber bewegen, drehen Sie einfach um 25 Grad. Wie kann ich das mit jQuery machen? Ich fand diese Geige (http://jsfiddle.net/HeFqh/11/), die ähnlich ist, was ich suche (bis zur nahtlosen Übergang, aber ich muss es rotateY

Jede Hilfe sehr

geschätzt

Answer 1

Sie so etwas tun könnte.:

$(".billMurray img").mousemove(
    function(e) { 
var offset = $(this).offset(); 
    var relativeX = (e.pageX - offset.left); 
if(relativeX< $(this).width()/2) { 

$(this).addClass("hover-left"); 
    $(this).removeClass("hover-right"); 
    $(this).removeClass('start'); 
} 
else { 
$(this).addClass("hover-right"); 
    $(this).removeClass("hover-left"); 
    $(this).removeClass('start'); 
} 



    } 
); 

$(".billMurray img").mouseleave(function(){ 
$(this).removeClass("hover-right"); 
    $(this).removeClass("hover-left"); 
    $(this).addClass('start'); 
}); 

So Idee ist: finden linke und rechte Mausposition (Mitte zuerst erhalten): https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/ für Bild und fügen und entsprechenden Klassen entfernen Class ‚Start‘ dort wegen nahtlosen Übergang ist, wenn die Maus geht weg von. Bild ...

leicht modifizierte CSS 210

DEMO, mit: https://jsfiddle.net/o9sa7nyh/6/

Answer 2

Bei jedem Ereignis hover berechnen Mutterelementbreite; Anfangs- und Speicherposition des Elements entlang der Achse x in einem Array berechnen; Überprüfen Sie, ob der aktuelle Wert event.clientX kleiner als die Position des aktuellen Elements plus der aktuellen Elementposition dividiert durch .length der Elemente im übergeordneten Container ist. Wenn true, der Mauszeiger über der linken Seite des Elements ist, setzen Sie - Zeichen bei rotate() Funktion, sonst der Mauszeiger ist über die rechte Seite des Elements, setzen + Zeichen bei rotate() Funktion.

var elems = $(".billMurray").hover(function(e) { 
 
    var len = elems.length; 
 
    // parent `.width()` divided by selected element `.length` 
 
    var width = elems.parent().width()/len; 
 
    // calculate beginning position of each element 
 
    var res = $.map(Array(len), function(_, i) { 
 
    return !i ? width/2 : width * i 
 
    }); 
 
    // mouse position 
 
    var x = e.clientX; 
 
    // select array index using element `.index()` 
 
    var index = elems.index(this); 
 
    // check if `x` is less than start of element 
 
    // position plus element position divided by 
 
    // selected element collection `.length` along x axis 
 
    // if `true` set sign to `-`, else set sign to `+` 
 
    var sign = x < res[index] + (res[index]/len) ? "-" : "+"; 
 
    $(this).css("transform", "perspective(800px) rotateY(" + sign + "25deg)") 
 
}, function() { 
 
    $(this).css("transform", "perspective(800px) rotateY(0deg)") 
 
})

.philWrap { 
 
    margin-top: 50px; 
 
} 
 
.billMurray { 
 
    width: 25%; 
 
    float: left; 
 
    text-align: center; 
 
    -webkit-transform: perspective(800px) rotateY(0deg); 
 
    -moz-transform: perspective(800px) rotateY(0deg); 
 
    -o-transform: perspective(800px) rotateY(0deg); 
 
    -ms-transform: perspective(800px) rotateY(0deg); 
 
    transform: perspective(800px) rotateY(0deg); 
 
    -webkit-transition-timing-function: ease-in; 
 
    transition-timing-function: ease-in; 
 
    -moz-transition: all, 0.5s; 
 
    -o-transition: all, 0.5s; 
 
    -webkit-transition: all, 0.5s; 
 
    transition: all, 0.5s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="philWrap"> 
 
    <div class="billMurray"><img src="http://fillmurray.com/200/300" alt=""></div> 
 
    <div class="billMurray"><img src="http://fillmurray.com/g/200/300" alt=""></div> 
 
    <div class="billMurray"><img src="http://fillmurray.com/200/300" alt=""></div> 
 
    <div class="billMurray"><img src="http://fillmurray.com/g/200/300" alt=""></div> 
 
</div>

jsfiddle https://jsfiddle.net/o9sa7nyh/10/