CSS3 Transitions and Transforms Examples
Using CSS3 Transitions and Transforms can be very funny. Today we’ll use webkit transitions.
The webkit browsers (Google Chome and Safari) can use the CSS3 Transitions and Transforms.
I made some examples for you 
Transitions
You can use:
transition-property : What property should animate. (e.g., opacity).
transition-duration: How long the transition should be (e.g., 1s)
transition-timing-function: The timing function for the transition (e.g., linear, ease-in).
transition: A shorthand for all properties.
Webkit Transform
The Webkit transform can be used to move objects and transform objects. Check out the list of options below:
scale, scaleX, scaleY
Scale an object around the origin. (e.g., 1, 2, 3).
Use negative if you want to flip the object (e.g., -1,-2,-3).
rotate
Rotate an object around the origin. (e.g., 90deg, 189deg).
translate, translateX, translateY
Translate an object. These functions take lengths or percentages as arguments.
Percentages are relative to the border box of the object.
skew, skewX, skewY
Skew an object. These functions take CSS angles.
Full Code
<html lang="en">
<head>
<title>Example 12 | Developer's Blog</title>
<meta charset="utf-8">
<style>
/* Example 1 */
a{
text-decoration:none;
color:#000;
-webkit-transition:color 1s ease-in;
}
a:hover{color:#06F;}
/* Example 2*/
#box{
margin:30px;
width:200px;
height:100px;
background-color:#930;
color:#FFF;
}
#box:hover{
background:#CCC;
-webkit-transition:background-color 0.5s linear;
}
/* Example 3*/
#avatar{margin-top:120px;}
#avatar #photo{
position:absolute;
top:10;
left:60;
margin-left:100px;
-webkit-transform-origin:0 0;
-webkit-transform: scale(2);
z-index:1;
-webkit-transition:-webkit-transform 0.5s ease-in-out;
}
#avatar:hover #photo{
-webkit-transform:rotate(0deg);
}
/* example 4 */
#more{margin-top:200px;}
#more #photo2{
position:absolute;
top:10;
left:60;
margin-left:100px;
-webkit-transform-origin:0 0;
-webkit-transform: rotate(0deg);
z-index:1;
-webkit-transition:-webkit-transform 0.5s ease-in-out;
}
#more:hover #photo2{
-webkit-transform:rotate(90deg);
}
/* Extra styles */
.size{font-size:20px;}
</style>
</head>
<body>
<h1>CSS3 Transitions</h1>
<h3>(This example only will work on Google Chrome and Safari)</h3>
<div class="size">1) <a href="#">Roll over me!</a></div>
<div id="box">2) Come here</div>
<div id="avatar">
3) Touch the image <img id="photo" src="http://cdn.quicoto.com/naota23.jpg">
</div>
<div id="more">
4) More transform <img id="photo2" src="http://cdn.quicoto.com/naota23.jpg">
</div>
</body>
</html>
Related PostsIf you liked CSS3 Transitions and Transforms Examples; the posts below might interest you too:
|
January 6, 2012
09:48
nmn