Animations and Presentations - HTML5 Advertising - page 112

</div>
</body>
</html>
<script>
var ad = document.querySelector('#ad');
var cta = document.querySelector('#cta');
var close = document.querySelector('#close');
cta.addEventListener('click', expandAd, false);
close.addEventListener('click', collapseAd, false);
function expandAd () {
ad.style.width = '500px';
cta.style.left = '360px';
close.style.opacity = 1;
cta.style.opacity = 0;
ad.classList.toggle("flip3D");
}
function collapseAd () {
ad.style.width = '300px';
cta.style.left = '160px';
close.style.opacity = 0;
cta.style.opacity = 1;
ad.classList.toggle("flip3D”);
}
</script>
Again, jopefully you've followed along and noticed the boldface sections of updated code. The first thing to do
in our CSS is add a class of .flip3D and define its transform properties by writing rotateY(360deg) for all browser
vendors. Second, add another transform property of style, which tells the browser to preserve-3D space when
applying the transformation. Next, utilize a new feature in HTML5 browsers called the classList API; in our JavaScript,
toggle the flip3D class by calling ad.classList.toggle('flip3D'); . This instructs the browser to add or remove
the class on expand and collapse ( http://developer.mozilla.org/en-US/docs/DOM/element.classList has more
information on the classList API).
Adding the code in Listing 5-10 and refreshing your browser should give an experience similar to the one shown
in the snapshot in Figure 5-10 .