Skip to content

Instantly share code, notes, and snippets.

@fieldoffice
Last active September 27, 2022 17:32
Show Gist options
  • Save fieldoffice/c0a4119f7752a880a638 to your computer and use it in GitHub Desktop.
Save fieldoffice/c0a4119f7752a880a638 to your computer and use it in GitHub Desktop.
Sass Transform Mixins
// Browser Prefixes
@mixin transform($transforms) {
-webkit-transform: $transforms;
-moz-transform: $transforms;
-ms-transform: $transforms;
transform: $transforms;
}
// Rotate
@mixin rotate ($deg) {
@include transform(rotate(#{$deg}deg));
}
// Scale
@mixin scale($scale) {
@include transform(scale($scale));
}
// Translate
@mixin translate ($x, $y) {
@include transform(translate($x, $y));
}
// Skew
@mixin skew ($x, $y) {
@include transform(skew(#{$x}deg, #{$y}deg));
}
// Transform Origin
@mixin transform-origin ($origin) {
-webkit-transform-origin: $origin;
-moz-transform-origin: $origin;
-ms-transform-origin: $origin;
transform-origin: $origin;
}
@kishangupta-multidots
Copy link

Hi @rajguru827 I think you can use This SCSS.

@mixin translateY {
transform: translateY(-50%);
}

.css {
@include translateY;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment