Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.custom-frame {
.tl, .tr, .bl, .br {
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
-webkit-transition: -webkit-transform .15s cubic-bezier(0.645, 0.045, 0.355, 1.000); /* Changed here */
-moz-transition: -moz-transform .15s cubic-bezier(0.645, 0.045, 0.355, 1.000);
-o-transition: -o-transform .15s cubic-bezier(0.645, 0.045, 0.355, 1.000);
transition: transform .15s cubic-bezier(0.645, 0.045, 0.355, 1.000);
}
&:hover {
.tl {
//translateX: 0.3em;
//translateY: 0.3em;
-webkit-transform: translate(0.3em, 0.3em);
-moz-transform: translate(0.3em, 0.3em);
-ms-transform: translate(0.3em, 0.3em);
-o-transform: translate(0.3em, 0.3em);
transform: translate(0.3em, 0.3em);
}
.tr {
//translateX: -0.3em;
//translateY: 0.3em;
-webkit-transform: translate(-0.3em, 0.3em);
-moz-transform: translate(-0.3em, 0.3em);
-ms-transform: translate(-0.3em, 0.3em);
-o-transform: translate(-0.3em, 0.3em);
transform: translate(-0.3em, 0.3em);
}
.bl {
//translateX: 0.3em;
//translateY: -0.3em;
-webkit-transform: translate(0.3em, -0.3em);
-moz-transform: translate(0.3em, -0.3em);
-ms-transform: translate(0.3em, -0.3em);
-o-transform: translate(0.3em, -0.3em);
transform: translate(0.3em, -0.3em);
}
.br {
//translateX: -0.3em;
//translateY: -0.3em;
-webkit-transform: translate(-0.3em, -0.3em);
-moz-transform: translate(-0.3em, -0.3em);
-ms-transform: translate(-0.3em, -0.3em);
-o-transform: translate(-0.3em, -0.3em);
transform: translate(-0.3em, -0.3em);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment