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="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8"/>
<title></title>
<style>
#orange1 {
height: 150px;
width: 225px;
}
.trans {
transform: scale(1) ;
}
</style>
<script>
window.onload = function () {
document.getElementById("orange1").onclick = function () {
this.classList.add("trans");
}
}
</script>
</head>
<body>
<img id="orange1" src="orange.jpg" style="position:relative"/>
</body>
</html>
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
following:
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