CSS3 transform and transitions
This Tutorial and Sample will show you how to use menu CSS3’s transform and transition properties make it possible to manipulate elements in a variety of ways using just CSS. CSS transform is used to scale, rotate, or even skew an element without disturbing the content around it, while transition is used to animate CSS properties into view.
The two properties are supported in modern versions of Safari, Chrome, Mozilla 3.5+, and Opera 9.5+ in varying degrees. With that brief introduction out of the way, the following uses CSS3’s transform and transition properties to “bloat up” an image when the mouse rolls over it, and return it to its original state when rolled out of:
Sample 1
View demo | [download id=”34628″]
Sample 2
View demo | [download id=”34630″]
tutorial Sample 1
1. Copy code Style bellow past before </head>
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: https://www.freshdesignweb.com/style/ */
body{padding:50px; }
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
2. Copy Code Bellow Past Before </body>
<ul>
<li><a href="#"><img src="images/Black-Open.png" title="Block" /></a></li>
<li><a href="https://www.freshdesignweb.com"><img src="images/Green-RSS.png" title="RSS" /></a></li>
<li><a href="https://www.freshdesignweb.com"><img src="images/Orange-Mail.png" title="Mail RSS" /></a></li>
<li><a href="https://www.freshdesignweb.com"><img src="images/Purple-Shop.png" title="E-Shoping" /></a></li>
<li><a href="https://www.freshdesignweb.com"><img src="images/Black-User.png" title="User" /></a></li>
</ul>
