We can add a transformation to the transition effect using these declarations:
transition: width 2s, height 2s, transform 2s;
(then apply a hover effect):
div:hover {transform: rotate(180deg);}
Hover the cursor over the red <div> element in the example below, to see the transition effect of such a combination:
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 100px; height: 100px; padding: 5px; background: red; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */ transition: width 2s, height 2s, transform 2s; } div:hover { width: 300px; height: 300px; -webkit-transform: rotate(180deg); /* Safari */ transform: rotate(180deg); } </style> <body> <div>Mouse me over to see me play!</div> </body> |
Mouse me over to see me play!
|
Note: This example does not work in Internet Explorer 9 and earlier versions.
