HTML and CSS Reference
In-Depth Information
■
Note
As of this writing only Chrome and safari support this feature.
You'll add a
range
control that you can use to change the rotation of the image. Insert the code shown in
bold from Listing 4-5.
Listing 4-5.
Adding a range control
<section>
<article class="featuredContent">
<a id="feature"></a>
<header>
<h3>Featured Article</h3>
</header>
<div class="rotateContainer">
<p>This is really cool...</p>
<img class="rotate" id="phone"
src="images/phonebooth.jpg"
alt="phonebooth" />
<input type="range" min="-180" max="180" step="18"
value="0" onchange="rotateImage(this.value)" />
<br />
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut.
</p>
To format the 3D transformation, you'll specify a couple of attributes. First, you'll set the
perspective
property on the
div
that contains the image. This establishes the vanishing point that is used to determine how
the 3D effect is rendered. Then, you'll set the
preserve-3d
attribute, which tells the browser to maintain the 3D
perspective when rotating the image. To do this, add the following to the end of the
style
section:
.rotateContainer
{
-webkit-perspective: 600px;
}
.rotate
{
-webkit-transform-style: preserve-3d;
}
Now you'll add a JavaScript function that will change the rotation of the image as the range control is
adjusted. Enter the code in bold in the
head
element:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chapter
4
- CSS Demo</title>
