hide initial 3d transform animation

Question

I have set up an animated card flip jsfiddle which happens on button click. It is set up using Modernizr to test for the feature then enable the 3d styling if the feature is available. if you press the run button you will see the back panel rotate 180 degrees on page load, is there a way to disable this? It does not happen if the styles are set from the start but I am enabling them later for compatibility (if you enable the "&& false" in the javascript you will see the alternate view for browsers without the 3d transform). HTML:

<div id="card-container">
    <button id="card-flip">Flip the card</button>
    <div id="card">
        <div class="front card-surface"><!-- front -->
            <p>The front</p>
        </div>
        <div class="back card-surface"><!-- back -->
            <p>The back</p>
        </div>
    </div>
</div>

Javascript:

if(Modernizr.csstransitions && Modernizr.csstransforms3d /* && false */ ){
    var flipButton = document.getElementById('card-flip');
flipButton.style.display = 'block';
    var cardContainer = document.getElementById('card-container');
    cardContainer.className = cardContainer.className + " threed";
    flipButton.addEventListener("click", flipfunction,false); // flipfunction toggles .flip class
}

CSS is on jsfiddle

Answer 1

You can avoid the card flipping effect on page load by setting the transition to the element with class='back' only when the parent #card element has the class='flip' .

On page load, the class='flip' would not be present and hence the effect would not applied.

Change the code from

.threed #card .card-surface{
    background-color:$base-white;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 280px;
    height: 180px;
    padding:10px;
}

to

.threed #card .front{ /* This is to apply the transition to the front element */
    background-color:$base-white;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 280px;
    height: 180px;
    padding:10px;
}
.threed #card.flip .back{ /* This is to apply transition to the back element only when parent has flip class */
    background-color:$base-white;
    -webkit-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    width: 280px;
    height: 180px;
    padding:10px;
}

Demo