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

左工作完美，只是不能得到“右”堆栈，以反映左准确。我做错了什么？

谢谢!

Answer 1

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

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

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