Hey! Do you have any query related to front end?

Sign in Sign up

Css3 piano card navigationBack

CSS3 "Transform and Transition" property can animate any element on the page and presents an animation in very simple way. It is very easy to use. Only changing in cordinates of "transform-origin" property you will get animation from different angle.


CSS3 Piano Card Navigation

Added i tag here, just for icon through awesome font.

Keys behind this animation in CSS file:

li a {

	overflow: hidden; 
        box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.2);
	transform: scale(1, 1);
	transform-origin:50% 50%;
	transition: all ease-out .3s;

overflow: hidden; has been used to keep icon out off the visible area at startup.

box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.2); for adding little shadow to keep stand out.

transform: scale(1, 1); At startup it will be in original size.

transform-origin:50% 50%; To animate the transform property fron center. In explaination, first 50% indicates X cordinate and secong 50% is Y cordinate. You can change according to youer choice for different angle of animation.

transition: all ease-out .3s; for adding animation to all property associated with this element. From box shadow to transform property.

CSS property on Hover:

li:hover a {
	transform: scale(1.1, 1.1);
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);

transform: scale(1.1, 1.1); Just to increaing size from 1 to 1.1.

z-index:1; To bring element at top from all.

box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9); To give some depth, so that it will appear as stand alone.

How to comment:

  • Create an account in discuss by clicking on login next to arrow.
  • Create password for discuss and varify your email id, through your mail.
  • Refresh page and comment.

You might also like

  • Auto responsive dropdown menu

    Auto responsive dropdown menu plugin

    • 614
    • 48
    • 614
    • facebook icon
    • twitter icon
    • google plus
  • Master checkbox control

    A master checkbox which controls all checkbox.

    • 285
    • 4
    • 285
    • facebook icon
    • twitter icon
    • google plus
  • Real time content edit

    Edit content at client side.

    • 228
    • 1
    • 228
    • facebook icon
    • twitter icon
    • google plus

Latest quries posted

gopa kumarabout 4 years ago

amit singhabout 4 years ago

rahmat aliabout 4 years ago

mandavi tiwariabout 4 years ago

rahul sharmaabout 4 years ago

Ask question
Latest video
Learn Angular
Profile pic
Guest Back