@import "shared"; // CSS Transform and Transform-Origin // Apply a transform sent as a complete string. @mixin apply-transform($transform) { @include experimental(transform, $transform); } // Apply a transform-origin sent as a complete string. @mixin apply-origin($origin) { @include experimental(transform-origin, $origin); } // 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); }