HTML and CSS Reference
In-Depth Information
Figure 5-9. Our ad expanding using CSS3 Transitions
Hopefully you can see from Listing 5-9 that you can re-create an expanding ad unit fairly easily using CSS, with
a little JavaScript for control. Also, keep in mind that you can use a transition for multiple CSS properties, including
color, height, margins, and much more. Super helpful if you need ads to expand in a variety of directions and
You can add a Javascript event listener to the dom's transitionend event by writing
element.addEventListener('transitionend', transitionEndHandler); . this can be useful to control your ad
content in a certain way when the transition is complete.
CSS3 Transforms
Let's wrap up the examples by discussing CSS3 Transforms, which allow elements to be manipulated and transformed
in a relational space. The transform property applies a 2D or 3D transformation to an element, which allows you to
rotate, scale, move, and skew to create some really interesting transformations. By default transform applies to the
top left of an element, or (0,0), but you can adjust the transform-origin property on an element as well to re-orient
the center point. There is also a property, currently supported in Webkit browsers, that allows nested items to preserve
the space that the elements reside in (2D or 3D). The transform-style property identifies how nested elements are
rendered in the desired space. Listing 5-10 adds a quick 3D flip to our expanding ad unit.
Listing 5-10. CSS3 Transforms Example
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
* {
font-family: Verdana;
#ad {
position: absolute;
Search WWH ::

Custom Search