i wanted create card text flip , show backside other text, whenever click on "card" (div). checked mistakes , stuff somehow not working on chrome.
html:
<div class="card effect__effect"> <div class="card__front"> <span class="card__text">front</span> </div> <div class="card__back"> <span class="card__text">back</span> </div> </div> css:
.card { position: relative; float: left; padding-bottom: 25%; width: 25%; text-align: center; } .card__front, .card__back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card__front, .card__back { -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .card__front { background-color: #ff5078; } .card__back { background-color: #1e1e1e; -webkit-transform: rotatey(-180deg); transform: rotatey(-180deg); } .card.effect__click.flipped .card__front { -webkit-transform: rotatey(-180deg); transform: rotatey(-180deg); } .card.effect__click.flipped .card__back { -webkit-transform: rotatey(0); transform: rotatey(0); } javascript:
(function() { var cards = document.queryselectorall(".card.effect__click"); ( var = 0, len = cards.length; < len; i++ ) { var card = cards[i]; clicklistener( card ); } function clicklistener(card) { card.addeventlistener( "click", function() { var c = this.classlist; c.contains("flipped") === true ? c.remove("flipped") : c.add("flipped"); }); } })();
here working fiddle http://jsfiddle.net/hzsbzxw6/ seems should work, way you're embedding script.
<script type = "text/javascript"> try fixing that, or not embedding inline.
