HTML and CSS Reference
In-Depth Information
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 () { = '500px'; = '360px'; = 1; = 0;
function collapseAd () { = '300px'; = '160px'; = 0; = 1;
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 ( 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 .
Search WWH ::

Custom Search