Skip to content

Instantly share code, notes, and snippets.

@polikin
Created October 31, 2013 17:13
Show Gist options
  • Save polikin/7253401 to your computer and use it in GitHub Desktop.
Save polikin/7253401 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@mixin translate($translation:null, $x:0, $y:0, $z:0, $property: transform, $fallback:true) {
@if $translation == translate3d {
-webkit-#{$property} : translate3d($x#{px}, $y#{px}, $z#{px});
-moz-#{$property} : translate3d($x#{px}, $y#{px}, $z#{px});
-ms-#{$property} : translate3d($x#{px}, $y#{px}, $z#{px});
-o-#{$property} : translate3d($x#{px}, $y#{px}, $z#{px});
}@else if $translation == translateX {
-webkit-#{$property} : translateX($x#{px});
-moz-#{$property} : translateX($x#{px});
-ms-#{$property} : translateX($x#{px});
-o-#{$property} : translateX($x#{px});
}@else if $translation == translateY {
-webkit-#{$property} : translateY($y#{px});
-moz-#{$property} : translateY($y#{px});
-ms-#{$property} : translateY($y#{px});
-o-#{$property} : translateY($y#{px});
}
@if $fallback == false {
//no fallback
}@else {
@if $x > 0 {
.no-csstransforms & { left: $x#{px}; }
}@else if $x < 0 {
.no-csstransforms & { left: $x#{px}; }
}
/* translate on Y axis */
@if $y > 0 {
.no-csstransforms & { top: $y#{px}; }
}@else if $y < 0 {
.no-csstransforms & { top: $y#{px}; }
}
}
}
.test {
@include translate(translateY, $y:20)
}
/** **/
.test-no-fallback {
@include translate(translateY, $y:20, $fallback:false)
}
.test {
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
/* translate on Y axis */
}
.no-csstransforms .test {
top: 20px;
}
/** **/
.test-no-fallback {
-webkit-transform: translateY(20px);
-moz-transform: translateY(20px);
-ms-transform: translateY(20px);
-o-transform: translateY(20px);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment