HTML and CSS Reference
In-Depth Information
This code applies the rotate method to an object when you add the .rota CSS class to the
object's styles collection. As mentioned, various transform methods are available, and you'll
examine each in turn. Use the following code for all the examples in this section:
<!DOCTYPE html>
<html lang="en" xmlns="">
<meta charset="utf-8"/>
#orange1 {
height: 150px;
width: 225px;
.trans {
transform: scale(1) ;
window.onload = function () {
document.getElementById("orange1").onclick = function () {
<img id="orange1" src="orange.jpg" style="position:relative"/>
This code creates a single image object to which you'll apply the transformations; however,
the transformations can work successfully against any HTML element. The image also is as-
signed an event handler for the click event. This suffices for demonstration purposes. You can
use any supported event to trigger a transformation. In the examples that follow, you'll need
to replace the .trans CSS class in the preceding code with the appropriate transform methods
to demonstrate them. You'll be prompted to replace the code when needed.
Using the rotate method
The rotate transform method enables you to rotate an object by a specified number of
degrees. The method accepts a single parameter that specifies the number of degrees. In
the previous code used for the scale transformation, replace the transform method with the
transform: rotate(90deg);
Now, run the webpage in the browser. Click the image to see the transform take effect. In
this case, the image is rotated clockwise by 90 degrees (see Figure 1-47). If you instead want
to rotate the image counterclockwise, you can specify a negative number of degrees.
Search WWH ::

Custom Search