jquery - CSS Transforms - Mirroring for Right to Left Version

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;
}

Left works PERFECTLY, just can't get the "right" stack to mirror the left exactly. What am I doing wrong?

Thanks!

Answer 1

看看这个：http: //jsfiddle.net/uy57B/5/

您只需要在右侧列表的最后一个元素上应用边距！

.right li:last-child:hover {
    margin-left:20px;
}