تحويل CSS3:RotateY يكسر النصف الأيسر من التخطيط المقلوب

Question

عرض حي للمشكلة

لقد قمت بإنشاء 6 كتل حمراء، وربطت مستمع النقر (مع وظيفة تنبه معرف المربع الذي تم النقر عليه) بها جميعًا، ثم قمت بتطبيقها -webkit-transform: rotateY(180deg);.الآن يقوم النصف الأيمن من المربعات بتنبيه المعرف الصحيح وفقًا للوجه، لكن المربعات الموجودة في النصف الأيسر تقوم بتنبيه المعرف الأصلي، وليس المقلوب.لقد اختبرت فقط على Chrome 31.

هل هذه هي الطريقة التي ينبغي أن تعمل؟كيف يمكنني جعله يعرض المعرفات المعكوسة في كل مكان؟

لغة البرمجة

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

جافا سكريبت/مسج

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

Answer 1

يبدو الأمر كما لو أن نصف الصف يتداخل مع النصف الآخر عند تدويره.ولمنع ذلك، قم بتغيير transform-origin بحيث يكون على اليسار وليس الوسط.بهذه الطريقة لا يتداخل أي شيء عند تدوير الصف.ثم قم ب traslateX لسحب الصف إلى مكانه.

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

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