HTML and CSS Reference
In-Depth Information
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
<article class="featuredContent">
<a id="feature"></a>
<h3>Featured Article</h3>
<div class="rotateContainer">
<p>This is really cool...</p>
<img class="rotate" id="phone"
alt="phonebooth" />
<input type="range" min="-180" max="180" step="18"
value="0" onchange="rotateImage(this.value)" />
<br />
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.
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:
-webkit-perspective: 600px;
-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">
<meta charset="utf-8" />
<title>Chapter 4 - CSS Demo</title>
Search WWH ::

Custom Search