Transition with Transformation

Now here we are using both Transition and Transformation method in one element.

Example:-

Go to this link and check out the live example of below codding .

<html>

<head>

<style>

div {

width: 100px;

height: 100px;

background: green;

transition: width 2s, height 2s, transform 2s;

color:#FFFFFF;

text-align:center;

font-size:24px;

}

div:hover {

width: 150px;

height: 150px;

transform: rotate(180deg);

}

</style>

</head>

<body>

<h1 style="background-color:orange; color:#FFFFFF;"> now both transition and transformation effect applyed in this element</h1>

<div>Rotate</div>

</body>

</html>

Thanks
Emraan Ali

Css Zilla