Compass Transform

Provides mixins for CSS3 transforms. See W3C: CSS 2D transforms.

This file can be imported using: @import "compass/css3/transform"

View the Source for this module on Github.

Examples

Transform
css3 mixin for css transforms

Imports

The following sass files are automatically imported when you import this file:

  1. CSS3 Utilities

Mixins

View Source: Sass | SCSS 

=apply-transform($transform)
  +experimental(transform, $transform, -moz, -webkit, -o, not -ms, not -khtml, official)

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

CSS Transform and Transform-Origin Apply a transform sent as a complete string.

View Source: Sass | SCSS 

=apply-origin($origin)
  +experimental(transform-origin, $origin, -moz, -webkit, -o, not -ms, not -khtml, official)

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

Apply a transform-origin sent as a complete string.

View Source: Sass | SCSS 

=transform-origin($originx: 50%, $originy: 50%)
  @if $originx or $originy
    @if $originy
      +apply-origin($originx or 50% $originy)
    @else
      +apply-origin($originx)

@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); } } }

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
View Source: Sass | SCSS 

=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)
  +apply-transform($transform)
  +transform-origin($originx, $originy)

@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); }

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
View Source: Sass | SCSS 

=scale($scale: 1.25, $originx: false, $originy: false)
  +apply-transform(scale($scale))
  +transform-origin($originx, $originy)

@mixin scale($scale: 1.25, $originx: false, $originy: false) {
  @include apply-transform(scale($scale));
  @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

View Source: Sass | SCSS 

=rotate($rotate: 45deg, $originx: false, $originy: false)
  +apply-transform(rotate($rotate))
  +transform-origin($originx, $originy)

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

Adjust only the rotation, with optional origin coordinates

View Source: Sass | SCSS 

=translate($transx: 0, $transy: 0)
  +apply-transform(translate($transx, $transy))

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

Adjust only the translation

View Source: Sass | SCSS 

=skew($skewx: 0deg, $skewy: 0deg, $originx: false, $originy: false)
  +apply-transform(skew($skewx, $skewy))
  +transform-origin($originx, $originy)

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

Adjust only the skew, with optional origin coordinates