3D旋转的元素我怎样得到正对我的子元素？

Question

写一个3D旋转效果的例子，每次点击一下button都会有一个li是正对我的，旋转结束后，我怎么得到正对我的li的数据呢？

<button>旋转下一个</button>
<div class="perspective:500px;">
    <ul style="transform-style: preserve-3d;">
        <li style="transform:rotateY(360deg) translateZ(10rem);" data-index="1">
            <img src="...">
        </li>
        <li style="transform:rotateY(360deg) translateZ(10rem);" data-index="2">
            <img src="...">
        </li>
        <li style="transform:rotateY(360deg) translateZ(10rem);" data-index="3">
            <img src="...">
        </li>
    </ul>
</div>

var count = 0;
$("button").click(funciton(callback){
    var num = ++count * (360 / 3);
    $ul.css({
            "-webkit-transform": "rotateY(" + num + "deg)",
            "-webkit-transition": "1s"
        }).one('transitionend',function() {
            callback(？);//我该如何传当前面对我的li的data-index呢？
        });
})

Answer 1

var index = 0;

$("button").click(function(){
    index++;
    console.log($("li").eq(index));
})