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
dimensions.
■
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.
Note
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
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
* {
font-family: Verdana;
}
#ad {
position: absolute;
