desandro / 3dtransforms

:package: Introduction to CSS 3D transforms

Home Page:https://3dtransforms.desandro.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

A quick sidenote

opened this issue · comments

Hi,
I didnt looked over all the project, only how to flip the card.

and i noticed that https://desandro.github.io/3dtransforms/examples/card-01.html used a js library.
after a quick search i found this: https://stackoverflow.com/questions/14615712/toggle-classname-onclick-javascript

dunno if is interesting to have it without dependencies, but sharing:

<script>
document.getElementById('flip').onclick = function() {
  var card = document.getElementById('card');
    var className = ' ' + card.className + ' ';

    card.className = ~className.indexOf(' flipped ') ?
                         className.replace(' flipped ', ' ') :
                         this.className + ' flipped';
}
</script>

Best regards,

This article was written in 2010. Now in 2017, you should use classList