Animating and Transitioning a Transform
You can apply animations and transitions to a transform.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
p {
padding: 5px;
border: medium double black;
background-color: lightgray;
font-family: sans-serif;
}
#myID {
font-size: x-large;
border: medium solid white;
background-color: green;
color: white;
padding: 4px;
}
#myID:hover {
-moz-transition-duration: 1.5s;
-moz-transform: rotate(360deg);
}
</style>
</head>
<body>
<p>
<span id="myID">CSS</span>
This is a test.
This is a test.
This is a test.
</p>
</body>
</html>
Home
HTML CSS Book
CSS
HTML CSS Book
CSS
Transforms:
- CSS transforms applies linear transformations to elements.
- Specifying an Origin
- Animating and Transitioning a Transform
Related: