Addded transform-origin to transforms

zinkkrysty · Aug 19, 2011 · 0943d14 · 0943d14
1 parent 2da2b19
commit 0943d14
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/app/assets/stylesheets/css3/_transform.scss b/app/assets/stylesheets/css3/_transform.scss
@@ -6,3 +6,14 @@
        -o-transform: $property;
           transform: $property;
 }
+
+@mixin transform-origin($axes: 50%) {
+// x-axis - left | center | right  | length | %
+// y-axis - top  | center | bottom | length | %
+// z-axis -                          length
+  -webkit-transform-origin: $axes;
+     -moz-transform-origin: $axes;
+      -ms-transform-origin: $axes;
+       -o-transform-origin: $axes;
+          transform-origin: $axes;
+}
diff --git a/readme.md b/readme.md
@@ -187,9 +187,10 @@ Takes up to 10 gradients. Position and shape are required.
     @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef);
 
 
-###Transform
+###Transform & Transform-origin
 
     @include transform(translateY(50px));
+    @include transform-origin(center top);
 
 
 ###Transitions
@@ -355,6 +356,7 @@ Create beautiful buttons by defining a style and color argument; using a single
       @ linear-gradient(*args)
       @ radial-gradient(*args)
       @ transform(*args)
+      @ transform-origin(*args)
 
       transition
         @ transition(*args)