Sass Transform Mixins

sass-transforms

// 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;
}

How can i achieve this "transform: translateY(-50%);" using translate mixin.

Hi @rajguru827 I think you can use some these two options..

1. 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%); }

2. 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;
}