HTML and CSS Reference
In-Depth Information
<script type="text/javascript">
function rotateImage(value){
document.getElementById("phone").style.webkitTransform
="rotateY(" + value + "deg)";
}
</script>
</head>
The range control was created with a minimum value of −180 and a maximum of 180. The
rotateImage()
function is called whenever this value changes and simply calls the
rotateY()
function passing in the selected
value. As you slide the range control you should see the image rotate as demonstrated in Figure
4-15
.
Figure 4-15.
The rotated phonebooth - in 3D!
Adding Animation
For the last effect, I'll show you how to create an animation effect without using any JavaScript. You can't modify
the image with CSS because that is considered content, not format. However, you can change the background
image and you'll take advantage of that to achieve the animation effect.
he
aside
element has a div defined as:
<div id="moon"></div>
Because there is no content or size defined, it has no effect on the page layout, currently. Now you'll use the
animation feature in CSS3 to iterate through various images that illustrate the phases of the moon.
