Embedded Files
Home > Chapter Review and Exercises > Chapter 18 - Transitions, Transforms, and Animation > Chapter 18 Presentation on Transitions
Chapter18.Transitions.Part1.pdfChapter18.Transitions.Part2.pdfChapter18.Transitions.Part3.pdfChapter18.Transitions.Part4.pdfWebsite Examples from Part 4
Website Examples from Part 4
Example 1:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
</body>
</html>
Example 2:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
a:hover div#myDiv {
transform: rotate(-360deg) scale(1.5);
transition: transform 2s linear;
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>
<div>
This a normal div element.
</div>
<a src="#"><div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
</a>
</body>
</html>
Example 3:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
/* transform: rotate(20deg); */
}
a:hover div#myDiv {
transform: rotate(-360deg) scale(1.5);
transition: transform 2s linear;
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element clockwise or counter-clockwise.</p>
<div>
This a normal div element.
</div>
<a src="#"><div id="myDiv">
This div element is rotated clockwise 20 degrees.
</div>
</a>
</body>
</html>
Report abuse