Transition-rotate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition-rotate </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{color:#fff;
width:100px;
height:100px;
background:#663366;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer, Firefox and Opera does not support the rotateX method.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">World. This is a DIV element.</div>
</body>
</html>
Transition-linear
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition-linear </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{color:#fff;
width:100px;
height:100px;
background: #663366;
transition-property:width 1s linear 1s;
/* Firefox 4 */
-moz-transition:width 1s linear 1s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 1s;
/* Opera */
-o-transition:width 1s linear 1s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div>Hello. Hover over the div element above, to see the transition effect.</div>
<div id="div2">World. The transition effect will wait 2 seconds before starting.</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition-rotate </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{color:#fff;
width:100px;
height:100px;
background:#663366;
transition:width 2s, height 2s;
-moz-transition:width 2s, height 2s, -moz-transform 2s; /* Firefox 4 */
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */
-o-transition:width 2s, height 2s, -o-transform 2s; /* Opera */
}
div:hover
{
width:200px;
height:200px;
transform:rotate(180deg);
-moz-transform:rotate(180deg); /* Firefox 4 */
-webkit-transform:rotate(180deg); /* Safari and Chrome */
-o-transform:rotate(180deg); /* Opera */
}
</style>
</head>
<body>
<p><b>Note:</b> Internet Explorer, Firefox and Opera does not support the rotateX method.</p>
<div>Hello. This is a DIV element.</div>
<div id="div2">World. This is a DIV element.</div>
</body>
</html>
Transition-linear
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>transition-linear </title>
<style type="text/css">
body{margin:0;padding:50px; background:#eee; }
div
{color:#fff;
width:100px;
height:100px;
background: #663366;
transition-property:width 1s linear 1s;
/* Firefox 4 */
-moz-transition:width 1s linear 1s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 1s;
/* Opera */
-o-transition:width 1s linear 1s;
}
div:hover
{
width:300px;
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work in Internet Explorer.</p>
<div>Hello. Hover over the div element above, to see the transition effect.</div>
<div id="div2">World. The transition effect will wait 2 seconds before starting.</div>
</body>
</html>
No comments:
Post a Comment