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

CSS转换 - 从右到左镜像的镜像

1 个答案: