CSS 变换 - 从右到左版本的镜像答案

【问题标题】：CSS Transforms - Mirroring for Right to Left VersionCSS 变换 - 从右到左版本的镜像
【发布时间】：2013-07-29 00:52:42
【问题描述】：

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

左完美，只是无法让“右”堆栈完全镜像左。我做错了什么？

谢谢！

【问题讨论】：

标签： jquery css transform

【解决方案1】：

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

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

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

【讨论】：