Pochylenie diva w głąb ekranu

Mam kwadratowego diva, który jest obrócony o 45deg. Chciałbym aby po najechaniu na niego kursorem pochylił się do przodu, ale nie wychodzi mi to - jest krzywo. Idzie jakby za bardzo w lewo. Najbliżej jest jak dam rotateY(-8deg), ale i tak nigdy nie ma tej równości. Może coś źle robię, lub pominąłem?

.item:hover {
    transform: perspective( 500px ) rotateX( 15deg ) rotateY(-15deg);
}

transform: perspective( 500px ) rotateX( 15deg ) rotateY(0deg);

Chodzi o taką sytuację:
http://jsfiddle.net/8syuz0jw/1/

Kwadrat musi być niestety we wrapperze i to wrapper musi być obrócony. Na samym kwadracie by działało. Mój błąd, że od razu nie napisałem.

Dodaj coś takiego:

transform-origin: right center 0;