Skip to content

Instantly share code, notes, and snippets.

@braddalton

braddalton/Rounded Avatar With CSS 3 Transition

Last active December 17, 2015 07:09
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save braddalton/5570603 to your computer and use it in GitHub Desktop.
Save braddalton/5570603 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Rounded Avatar With CSS 3 Transition
.avatar:hover{
border-radius: 50% 50% 50% 50%;
transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
-webkit-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
-moz-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
-o-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
-ms-transform: rotate(0deg) scale(0.67) skew(1deg) translate(0px);
}
// How To Make Rounded Avatars http://wp.me/p1lTu0-9VQ
.avatar {
border-radius: 50% 50% 50% 50%;
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
-ms-transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment