jquery - CSS 変換 - 右から左へのバージョンのミラーリング

Question

http://jsfiddle.net/uy57B/2/

.left li {
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
    -webkit-transform: perspective( 350px ) rotateY(25deg);
    -moz-transform: perspective( 350px ) rotateY(25deg);
    -o-transform: perspective( 350px ) rotateY(25deg);
    -ms-transform: perspective( 350px ) rotateY(25deg);
    transform: perspective( 350px ) rotateY(25deg);
    margin-left:-20px;
}
.left li:hover {
    -webkit-transform: perspective( 350px ) rotateY(0deg);
    -moz-transform: perspective( 350px ) rotateY(0deg);
    -o-transform: perspective( 350px ) rotateY(0deg);
    -ms-transform: perspective( 350px ) rotateY(0deg);
    transform: perspective( 350px ) rotateY(0deg);  
    margin-right: 20px;
}
.right li {
    -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    transition:.3s;
    -webkit-transform: perspective( 350px ) rotateY(-25deg);
    -moz-transform: perspective( 350px ) rotateY(-25deg);
    -o-transform: perspective( 350px ) rotateY(-25deg);
    -ms-transform: perspective( 350px ) rotateY(-25deg);
    transform: perspective( 350px ) rotateY(-25deg);
     margin-right:-20px;
}
.right li:hover {
    -webkit-transform: perspective( 350px ) rotateY(0deg);
    -moz-transform: perspective( 350px ) rotateY(0deg);
    -o-transform: perspective( 350px ) rotateY(0deg);
    -ms-transform: perspective( 350px ) rotateY(0deg);
    transform: perspective( 350px ) rotateY(0deg);  
    margin-left: 20px;
}

左は完全に機能しますが、「右」のスタックを左に正確にミラーリングすることはできません。私は何を間違っていますか？

ありがとう！