CSS3 преобразование: ротатистые разрывы оставлены половину перевернутой макета

Question

Живая демонстрация проблемы

Я создал 6 красных блоков, связывался слушателем клика (с функцией, которая предупреждает идентификатор кликата) для всех из них, затем применил -webkit-transform: rotateY(180deg);.Теперь правая половина коробок предупреждает правильный идентификатор в соответствии с флипсом, но коробки на левой половине предупреждают о первоначальном идентификаторе, а не перевернутыми.Я тестировал только на Chrome 31.

Это так, как он должен работать?Как я могу сделать это, чтобы отобразить перевернутые идентификаторы везде?

HTML

<table>
    <tr>
        <td id="t1">t1</td>
        <td id="t2">t2</td>
        <td id="t3">t3</td>
        <td id="t4">t4</td>
        <td id="t5">t5</td>
        <td id="t6">t6</td>
    </tr>
</table>

.

CSS

tr {
    -webkit-transform: rotateY(180deg);
}

td {
    background-color: red;
    height: 50px;
    width: 50px;
    text-align: center;
}

.

JavaScript / jQuery

$(document).ready(function(){
    $('td').click(function(){
        alert($(this).attr('id'));
    });
});

.

Answer 1

Это так, как будто половина строки перекрывает другую половину, когда вращается.Чтобы предотвратить это, изменить генеракодицетагкод так, чтобы оно слева и не в середине.Этот способ ничего не совпадает, когда ряд вращается.Затем сделайте генеракодицетагкод, чтобы вытащить ряд назад на место.

tr {
    -webkit-transform-origin: center left;
    -webkit-transform: rotateY(180deg) translateX(-100%);
}

.

http://jsfiddle.net/3bsyw/2/