Transformação CSS3:rotateY quebra a metade esquerda do layout invertido
Pergunta
Demonstração ao vivo do problema
Criei 6 blocos vermelhos, vinculei um click listener (com uma função que alerta o id da caixa clicada) a todos eles e apliquei -webkit-transform: rotateY(180deg);
.Agora a metade direita das caixas está alertando o id correto de acordo com a virada, mas as caixas da metade esquerda estão alertando o id original, e não os invertidos.Testei apenas no Chrome 31.
É assim que deveria funcionar?Como posso exibir os IDs invertidos em todos os lugares?
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'));
});
});
Solução
É como se metade da linha se sobrepusesse à outra metade quando girada.Para evitar isso, altere o transform-origin
para que fique à esquerda e não no meio.Dessa forma, nada se sobrepõe quando a linha é girada.Então faça um traslateX
para puxar a linha de volta no lugar.
tr {
-webkit-transform-origin: center left;
-webkit-transform: rotateY(180deg) translateX(-100%);
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow