Remove From My Forums

Backface Visibility with 3D Transforms

Question

Hello All,

Hiding backface visibility works when used with a transform i.e. rotateY.

The problem occurs when you try to add a click initiated transition i.e. flipping a card. The backface visibility property fails to hide the reverse side of the image. Any ideas why? How to make this work? (Just in case it isn't obvious, this is possible in webkit). Code below;

<div id="gameBoard">
        <div class="wrapper">
            <div class="card">
                <div class="face front"></div>
                <div class="face back"></div>
            </div>
        </div>
</div>

.wrapper {
    width: 94px;
    height: 132px;
    position: absolute;
    margin-left: 50px;
}

.card, .card .face {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: perspective(500px) rotateY(0deg);
    transform-origin: 50% 50%;
    transition: all 1s cubic-bezier(0.650, -0.600, 0.240, 1.650);
}

.face.front {
    background-image: url('../images/Card-logo-border-alt.svg');
}

.face.back {
    background-image: url('../images/Card-logo-border.svg');
    backface-visibility: hidden;   
}

$(document).ready(function() {
        $('.card').click(function () {
            $(this).css({ "transform": "perspective(500px) rotateY(-180deg)"});
        });
    });

Monday, July 9, 2012 7:24 PM

Answers

0

Sign in to vote
Hi,

This property is working fine. But it seems the logic is incorrect. At the beginning, you probably want to show the front image, but not the back image. So please configure the back image to rotate for -180 degrees. It is also needed to set both of their backface-visibility to hidden, so they won’t be displayed when transformed to the background:

.face.front {
       background-image: url(‘your front image’);
backface-visibility: hidden;
}

.face.back {
       transform: perspective(500px) rotateY(-180deg);
       background-image: url(‘your back image’);
backface-visibility: hidden;
}

When you want to rotate the card, do not rotate the whole card. Instead, please switch the front and back images’ rotateY:

        var front = document.getElementsByClassName("face")[0];
        front.style.transform = "perspective(500px) rotateY(-180deg)";
        var back = document.getElementsByClassName("face")[1];
        back.style.transform = "perspective(500px) rotateY(0deg)";

Best Regards,

Ming Xu.
Please mark the replies as answers if they help or unmark if not.
If you have any feedback about my replies, please contact msdnmg@microsoft.com.
Microsoft One Code Framework
- Marked as answer by B-Mac18 Tuesday, July 10, 2012 12:59 PM
Tuesday, July 10, 2012 10:44 AM

Moderator

Answered by:

Backface Visibility with 3D Transforms

Question

Answers