@import “shared”;

// CSS Transform and Transform-Origin

// Apply a transform sent as a complete string.

@mixin apply-transform($transform) {

@include experimental(transform, $transform,
  -moz, -webkit, -o, not -ms, not -khtml, official
);

}

// Apply a transform-origin sent as a complete string.

@mixin apply-origin($origin) {

@include experimental(transform-origin, $origin,
  -moz, -webkit, -o, not -ms, not -khtml, official
);

}

// transform-origin requires x and y coordinates // // * only applies the coordinates if they are there so that it can be called by scale, rotate and skew safely

@mixin transform-origin($originx: 50%, $originy: 50%) {

@if $originx or $originy {
  @if $originy {
     @include apply-origin($originx or 50% $originy);
   } @else {
     @include apply-origin($originx);
   }
}

}

// A full transform mixin with everything you could want // // * including origin adjustments if you want them // * scale, rotate and skew require units of degrees(deg) // * scale takes a multiplier, rotate and skew take degrees

@mixin transform(

$scale: 1,
$rotate: 0deg,
$transx: 0,
$transy: 0,
$skewx: 0deg,
$skewy: 0deg,
$originx: false,
$originy: false

) {

$transform : scale($scale) rotate($rotate) translate($transx, $transy) skew($skewx, $skewy);
@include apply-transform($transform);
@include transform-origin($originx, $originy);

}

// Transform Partials // // These work well on their own, but they don't add to each other, they override. // Use them with extra origin args, or along side +transform-origin

// Adjust only the scale, with optional origin coordinates

@mixin scale($scale: 1.25, $originx: false, $originy: false) {

@include apply-transform(scale($scale));
@include transform-origin($originx, $originy);

}

// Adjust only the rotation, with optional origin coordinates

@mixin rotate($rotate: 45deg, $originx: false, $originy: false) {

@include apply-transform(rotate($rotate));
@include transform-origin($originx, $originy);

}

// Adjust only the translation

@mixin translate($transx: 0, $transy: 0) {

@include apply-transform(translate($transx, $transy));

}

// Adjust only the skew, with optional origin coordinates @mixin skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false) {

@include apply-transform(skew($skewx, $skewy));
@include transform-origin($originx, $originy);

}