@import "compass/css3/transform";

.apply-origin-2d                  { @include apply-origin(2px 5%, false); }
.apply-origin-3d                  { @include apply-origin(2px 5% 2in, true); }
.transform-origin-2d              { @include transform-origin(100px, 100px); }
.transform-origin-3d              { @include transform-origin(100px, 100px, 100px); }
.transform-2d                     { @include transform2d(rotateY(20deg)); }
.transform-3d                     { @include transform3d(rotateZ(20deg)); }
.perspective                      { @include perspective(500); }
.perspective-origin               { @include perspective-origin(25% 25%)}
.transform-style                  { @include transform-style; }
.backface-visibility              { @include backface-visibility;}
.scale                            { @include scale(30px, 50px);}
.scale-3d                         { @include scale(30px, 50px, false, true);}
.scale-with-perspective           { @include scale(30px, 50px, 500);}
.scale-3d-with-perspective        { @include scale(30px, 50px, 500, true);}
.scale-x                          { @include scaleX(30px);}
.scale-x-3d                       { @include scaleX(30px, false, true);}
.scale-x-with-perspective         { @include scaleX(30px, 500);}
.scale-x-3d-with-perspective      { @include scaleX(30px, 500, true);}
.scale-y                          { @include scaleY(50px);}
.scale-y-3d                       { @include scaleY(50px, false, true);}
.scale-y-with-perspective         { @include scaleY(50px, 500);}
.scale-y-3d-with-perspective      { @include scaleY(50px, 500, true);}
.scale-z                          { @include scaleZ(50px);}
.scale-z-with-perspective         { @include scaleZ(50px, 500);}
.scale3d                          { @include scale3d(30px, 50px, 100px);}
.scaled3-with-perspective         { @include scale3d(30px, 50px, 100px, 500);}
.rotate                           { @include rotate(25deg, 500);}
.rotate-with-perspective          { @include rotate(25deg, 500);}
.rotate-z                         { @include rotateZ(25deg);}
.rotate-z-with-perspective        { @include rotateZ(25deg, 500);}
.rotate-x                         { @include rotateX(25deg);}
.rotate-x-with-perspective        { @include rotateX(25deg, 500);}
.rotate-y                         { @include rotateY(25deg);}
.rotate-y-with-perspective        { @include rotateY(25deg, 500);}
.rotate-3d                        { @include rotate3d(5, 2, 1, 75deg);}
.rotate-3d-with-perspective       { @include rotate3d(5, 2, 1, 75deg, 500);}
.translate                        { @include translate(20px, 30%);}
.translate-with-perspective       { @include translate(20px, 30%, 500);}
.translate-3d                     { @include translate(20px, 30%, false, true);}
.translate-3d-with-perspective    { @include translate(20px, 30%, 500, true);}
.translate-x                      { @include translateX(30px);}
.translate-x-3d                   { @include translateX(30px, false, true);}
.translate-x-with-perspective     { @include translateX(30px, 500);}
.translate-x-3d-with-perspective  { @include translateX(30px, 500, true);}
.translate-y                      { @include translateY(30px);}
.translate-y-3d                   { @include translateY(30px, false, true);}
.translate-y-with-perspective     { @include translateY(30px, 500);}
.translate-y-3d-with-perspective  { @include translateY(30px, 500, true);}
.translate-z                      { @include translateZ(30px);}
.translate-z-with-perspective     { @include translateZ(30px, 500);}
.translate-3d                     { @include translate3d(30px, 50px, 75px);}
.translate-3d-with-perspective    { @include translate3d(30px, 50px, 75px, 500);}
.skew                             { @include skew(20deg, 50deg);}
.skew-3d                          { @include skew(20deg, 50deg, true);}
.skew-x                           { @include skewX(20deg);}
.skew-x-3d                        { @include skewX(20deg, true);}
.skew-y                           { @include skewY(20deg);}
.skew-y-3d                        { @include skewY(20deg, true);}
.create-transform-2d              { @include create-transform(
                                               500,
                                               20px, 20px, false,
                                               25deg, 25deg, false, false
                                               50px, 50px, false,
                                               50deg, 50deg,
                                               50%, 50%, false
                                              );
                                  }
.create-transform-3d              { @include create-transform(
                                               500,
                                               20px, 20px, 20px,
                                               25deg, 25deg, 25deg, false
                                               50px, 50px, 50px,
                                               50deg, 50deg,
                                               50%, 50%, 50%
                                              );
                                  }

.simple-transform                 { @include simple-transform(
                                               25px,
                                               25deg,
                                               10px, 10px,
                                               30deg, 30deg,
                                               10%, 10%
                                             );
                                  }