-
-
Save fieldoffice/c0a4119f7752a880a638 to your computer and use it in GitHub Desktop.
// 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; | |
} |
Hi @rajguru827 I think you can use some these two options..
-
You can use the same Translate mixin,
// Translate
@mixin translate ($x, $y) {
@include transform(translate($x, $y));
}
and you put your scss code like that..css { @include translate(0, 25%); }
-
You can create a new mixin named translateY and add the following code:
// TranslateY
@mixin translateY ($y) {
@include transform(translateY($y));
}
and you put your new scss code like that.css { @include translateY(25%); }
PS: this would also work for the X case. Only you should change the letter Y to X..
hope these examples can help you..
Hello,
Specific scale value. Considering X and Y values. Rest is good.
// scale
//if wants to use simply scale() = ex.:- scale(all, 1)
//if want to scale to specific direction or 3d = ex.:- scale(X, 1), scale(Y, 1), scale(3d, 1)
@mixin scale($xy, $scale) {
$scaleVal: "";
@if($xy == "all") {
$scaleVal: scale;
} @else {
$scaleVal: scale + $xy;
}
@include transform($scaleVal+"("+$scale+")");
}
Thanks
Hi @rajguru827 I think you can use This SCSS.
@mixin translateY {
transform: translateY(-50%);
}
.css {
@include translateY;
}
How can i achieve this "transform: translateY(-50%);" using translate mixin.