compass transforms version 2

_transform-v2.scss

@import "shared";

// Transform -----------------------------------------------------------------
// Apply a transform sent as a complete string.
@mixin apply-transform(
  $transform, 
  $threeD: false
) {
  @if $threeD { 
    @include experimental(transform, $transform, 
      not -moz, -webkit, not -o, not -ms, not -khtml, official
    );
  } @else {
    @include experimental(transform, $transform, 
      -moz, -webkit, -o, not -ms, not -khtml, official
    );
  }
}

// A shortcut for apply-transform
@mixin transform(
  $trans,
  $threeD: false
) {
  @include apply-transform($trans, $threeD);
}

// Transform-origin ----------------------------------------------------------
// Apply a transform-origin sent as a complete string.
@mixin apply-origin(
  $origin, 
  $threeD: false
) {
  @if $threeD { 
    @include experimental(transform-origin, $origin, not -moz, -webkit, not -o, not -ms, not -khtml, official);
  } @else {
    @include experimental(transform-origin, $origin, -moz, -webkit, -o, not -ms, not -khtml, official);
  }
}

// Transform-origin sent as arguments
// requires x and y coordinates
// allows for z coordinates as well, allowed in safari only.
//
// * 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%,
  $originz: false,
  $threeD: false
) {
  $origin: unquote('');
  @if $originx or $originy or $originz {
    @if $originx { $origin: $originx; } @else { $origin: 50%; }
    @if $originy { $origin: $origin $originy; } @else { @if $originz { $origin: $origin 50%; }}
    @if $originz { $origin: $origin $originz; $threeD: true; }
    @include apply-origin($origin, $threeD);
  }
}

// full transform mixins 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

// A simple version of the transform mixin -----------------------------------
// backwards-compatible with previous version of transform mixin
@mixin transform-simple(
  $scale: false,
  $rotate: false,
  $transx: false,
  $transy: false,
  $skewx: false,
  $skewy: false,
  $originx: false,
  $originy: false
) {
  @include compact-transform(
    false, 
    $scale, $scale, false, 
    false, false, $rotate,
    $transx, $transy, false, 
    $skewx, $skewy,
    $originx, $originy, false,
    false
  );
}

// 2D Transforms with all the available options ------------------------------
@mixin transform-2d(
  $scalex: false,
  $scaley: false,
  $rotatez: false,
  $transx: false,
  $transy: false,
  $skewx: false,
  $skewy: false,
  $originx: false,
  $originy: false
) {
  @include compact-transform(
    false, 
    $scalex, $scaley, false, 
    false, false, $rotatez,
    $transx, $transy, false, 
    $skewx, $skewy,
    $originx, $originy, false,
    false
  );
}

// 3D Transforms with all the available options ------------------------------
@mixin transform-3d(
  $perspective: false,
  $scalex: false,
  $scaley: false,
  $scalez: false,
  $rotatex: false,
  $rotatey: false,
  $rotatez: false,
  $transx: false,
  $transy: false,
  $transz: false,
  $skewx: false,
  $skewy: false,
  $originx: false,
  $originy: false,
  $originz: false
) {
  @include compact-transform(
    $perspective, 
    $scalex, $scaley, $scalez, 
    $rotatex, $rotatey, $rotatez,
    $transx, $transy, $transz, 
    $skewx, $skewy,
    $originx, $originy, $originz,
    true
  );
}

// The logic for managing all your options -----------------------------------
@mixin compact-transform(
  $perspective: false,
  $scalex: false,
  $scaley: false,
  $scalez: false,
  $rotatex: false,
  $rotatey: false,
  $rotatez: false,
  $transx: false,
  $transy: false,
  $transz: false,
  $skewx: false,
  $skewy: false,
  $originx: false,
  $originy: false,
  $originz: false,
  $threeD: false
) {
  $trans: unquote("");
  
  // perspective
  @if $perspective { $trans: perspective($perspective) ; }
  
  // scale
  @if $scalex and $scaley {
    @if $scalez { $trans: $trans scale3d($scalex, $scaley, $scalez); }
    @else { $trans: $trans scale($scalex, $scaley); }
  } @else {
    @if $scalex { $trans: $trans scaleX($scalex); }
    @if $scaley { $trans: $trans scaleY($scaley); }
    @if $scalez { $trans: $trans scaleZ($scalez); }
  }
  
  // rotate
  @if $rotatex and $rotatey and $rotatez {
    $trans: $trans rotate3d($rotatex, $rotatey, $rotatez);
  } @else {
    @if $rotatex { $trans: $trans rotateX($rotatex); }
    @if $rotatey { $trans: $trans rotateY($rotatey); }
    @if $rotatez { $trans: $trans rotate($rotatez); }    
  }
  
  // translate
  @if $transx and $transy {
    @if $transz { $trans: $trans translate3d($transx, $transy, $transz); }
    @else { $trans: $trans translate($transx, $transy); }
  } @else {
    @if $transx { $trans: $trans translateX($transx); }
    @if $transy { $trans: $trans translateY($transy); }
    @if $transz { $trans: $trans translateZ($transz); }
  }

  // skew
  @if $skewx and $skewy { $trans: $trans skew($skewx, $skewy); } 
  @else {
    @if $skewx { $trans: $trans skewX($skewx); }
    @if $skewy { $trans: $trans skewY($skewy); }
  }

  // apply it!
  @include apply-transform($trans, $threeD);
  @include transform-origin($originx, $originy, $originz, $threeD);
}

// 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 -------------------
$default-scalex : 1.25 !default;
$default-scaley : $default-scalex !default;
$default-scalez : $default-scalex !default;

@mixin scale(
  $scalex: $default-scalex, 
  $scaley: $scalex, 
  $originx: false, 
  $originy: false,
  $threeD: false
) {
  $scale: unquote("");
  @include apply-transform(scale($scalex, $scaley), $threeD);
  @include transform-origin($originx, $originy, false, $threeD);
}

@mixin scaleX(
  $scale: $default-scalex, 
  $originx: false, 
  $originy: false, 
  $originz: false,
  $threeD: $originz
) {
  @include apply-transform(scaleX($scale), $threeD);
  @include transform-origin($originx, $originy, $originz, $threeD);
}

@mixin scaleY(
  $scale: $default-scaley, 
  $originx: false, 
  $originy: false, 
  $originz: false,
  $threeD: $originz
) {
  @include apply-transform(scaleY($scale), $threeD);
  @include transform-origin($originx, $originy, $originz, $threeD);
}

@mixin scaleZ(
  $scale: $default-scalez, 
  $originx: false, 
  $originy: false, 
  $originz: false
) {
  @include apply-transform(scaleZ($scale), true);
  @include transform-origin($originx, $originy, $originz, true);
}

@mixin scale3d(
  $scalex: $default-scalex, 
  $scaley: $default-scaley, 
  $scalez: $default-scalez, 
  $originx: false, 
  $originy: false, 
  $originz: false
) {
  @include apply-transform(scale3d($scalex, $scaley, $scalez), true);
  @include transform-origin($originx, $originy, $originz, true);
}

// Adjust only the rotation, with optional origin coordinates ----------------
$default-rotate   : 45deg !default;
$default-rotatex  : 45deg !default;
$default-rotatey  : 45deg !default;

@mixin rotate(
  $rotate: $default-rotate, 
  $originx: false, 
  $originy: false,
  $threeD: false
) {
  @include apply-transform(rotate($rotate), $threeD);
  @include transform-origin($originx, $originy, false, $threeD);
}

@mixin rotateX(
  $rotate: $default-rotatex, 
  $originx: false, 
  $originy: false,
  $originz: false
) {
  @include apply-transform(rotateX($rotate), true);
  @include transform-origin($originx, $originy, $originz, true);
}

@mixin rotateY(
  $rotate: $default-rotatey, 
  $originx: false, 
  $originy: false,
  $originz: false
) {
  @include apply-transform(rotateY($rotate), true);
  @include transform-origin($originx, $originy, $originz, true);
}

@mixin rotate3d(
  $rotate: $default-rotate, 
  $originx: false, 
  $originy: false,
  $originz: false
) {
  @include apply-transform(rotate3d($rotate), true);
  @include transform-origin($originx, $originy, $originz, true);
}

// Adjust only the translation -----------------------------------------------
$default-transx : 1em !default;
$default-transy : 0 !default;
$default-transz : 0 !default;

@mixin translate(
  $transx: $default-transx, 
  $transy: $default-transy,
  $threeD: false
) {
  @include apply-transform(translate($transx, $transy), $threeD);
}

@mixin translateX(
  $transx: $default-transx,
  $threeD: false
) {
  @include apply-transform(translateX($transx), $threeD);
}

@mixin translateY(
  $transy: $default-transy,
  $threeD: false
) {
  @include apply-transform(translateY($transy), $threeD);
}

@mixin translateZ(
  $transz: $default-transz
) {
  @include apply-transform(translateZ($transz), true);
}

@mixin translate3d(
  $transx: $default-transx, 
  $transy: $default-transy, 
  $transz: $default-transz
) {
  @include apply-transform(translate($transx, $transy, $transz), true);
}

// Adjust only the skew, with optional origin coordinates --------------------
$default-skewx : 0deg !default;
$default-skewy : 0deg !default;

@mixin skew(
  $skewx: $default-skewx, 
  $skewy: $default-skewy, 
  $originx: false, 
  $originy: false,
  $threeD: false
) {
  @include apply-transform(skew($skewx, $skewy), $threeD);
  @include transform-origin($originx, $originy, false, $threeD);
}

@mixin skewX(
  $skewx: $default-skewx, 
  $originx: false, 
  $originy: false,
  $threeD: false
) {
  @include apply-transform(skewX($skewx), $threeD);
  @include transform-origin($originx, $originy, false, $threeD);
}

@mixin skewY(
  $skewy: $default-skewy, 
  $originx: false, 
  $originy: false,
  $threeD: false
) {
  @include apply-transform(skewY($skewy), $threeD);
  @include transform-origin($originx, $originy, false, $threeD);
}

// Adjust the perspective and style of 3d transforms -------------------------

// determines the perspective of 3d transforms
// smaller lengths create more exagerated perspective
// 500px to 1000px is a reasonable range for most elements
@mixin perspective($p) {
  @include experimental(perspective, $p, 
    not -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}

// browser defaults to the center of the elements border box
@mixin perspective-origin($po) {
  @include experimental(perspective-origin, $po, 
    not -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}

// determines whether a 3d objects children are also 3d
// accepts "flat" or "preserves-3d"
// browser defaults to flat, mixin defaults to preserves-3d
@mixin transform-style($ts: unquote("preserves-3d")) {
  @include experimental(perspective-origin, $ts, 
    not -moz, -webkit, not -o, not -ms, not -khtml, official
  );
}