diff --git a/build/minified/modules/sidebar.js b/build/minified/modules/sidebar.js
index 35528e6d0..9873aff86 100644
--- a/build/minified/modules/sidebar.js
+++ b/build/minified/modules/sidebar.js
@@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) {
         add: {
           bodyCSS: function() {
             var
-              style      = '',
-              direction  = module.get.direction(),
-              moduleSize = (module.is.vertical())
+              style     = '',
+              direction = module.get.direction(),
+              distance  = (module.is.vertical())
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
             if(direction !== className.bottom) {
               style = ''
                 + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + 'html {'
+                + '  background-color: #3E3E3E'
+                + '}'
+                + 'body {'
+                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
                 + '}'
-                + '</style>'
               ;
+              if(settings.useTransform) {
+                style += ''
+                  + 'body.pushed {'
+                  + module.get.transform(direction, distance)
+                  + '}'
+                  + '</style>'
+                ;
+              }
+              else {
+                style += ''
+                  + 'body.pushed {'
+                  + '  margin-' + direction + ': ' + distance + 'px !important;'
+                  + '}'
+                  + '</style>'
+                ;
+              }
             }
             $head.append(style);
             module.refresh();
@@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
+          transform: function(direction, distance) {
+            if(direction && distance) {
+              if(direction == className.left) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
+                  + 'margin-right: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.right) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
+                  + 'margin-left: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.top) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
+                ;
+              }
+              if(direction == className.bottom) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
+                ;
+              }
+            }
+          },
+          transformProperty: function() {
+            var
+              element    = document.createElement('element'),
+              properties = {
+                'transform'       :'transform',
+                'msTransform'     :'-ms-transform',
+                'MozTransform'    :'-moz-transform',
+                'WebkitTransform' :'-webkit-transform'
+              },
+              property
+            ;
+            for(property in properties){
+              if( element.style[property] !== undefined ){
+                return properties[property];
+              }
+            }
+          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) {
 
 $.fn.sidebar.settings = {
 
-  moduleName  : 'Sidebar',
-  namespace   : 'sidebar',
+  moduleName   : 'Sidebar',
+  namespace    : 'sidebar',
+
+  useTransform : true,
 
-  verbose     : true,
-  debug       : true,
-  performance : true,
+  verbose      : true,
+  debug        : true,
+  performance  : true,
 
-  overlay     : false,
+  overlay      : false,
 
-  side        : 'left',
-  duration    : 500,
+  side         : 'left',
+  duration     : 500,
 
-  onChange    : function(){},
-  onShow      : function(){},
-  onHide      : function(){},
+  onChange     : function(){},
+  onShow       : function(){},
+  onHide       : function(){},
 
   className: {
     active : 'active',
diff --git a/build/packaged/modules/sidebar.js b/build/packaged/modules/sidebar.js
index 35528e6d0..9873aff86 100644
--- a/build/packaged/modules/sidebar.js
+++ b/build/packaged/modules/sidebar.js
@@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) {
         add: {
           bodyCSS: function() {
             var
-              style      = '',
-              direction  = module.get.direction(),
-              moduleSize = (module.is.vertical())
+              style     = '',
+              direction = module.get.direction(),
+              distance  = (module.is.vertical())
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
             if(direction !== className.bottom) {
               style = ''
                 + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + 'html {'
+                + '  background-color: #3E3E3E'
+                + '}'
+                + 'body {'
+                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
                 + '}'
-                + '</style>'
               ;
+              if(settings.useTransform) {
+                style += ''
+                  + 'body.pushed {'
+                  + module.get.transform(direction, distance)
+                  + '}'
+                  + '</style>'
+                ;
+              }
+              else {
+                style += ''
+                  + 'body.pushed {'
+                  + '  margin-' + direction + ': ' + distance + 'px !important;'
+                  + '}'
+                  + '</style>'
+                ;
+              }
             }
             $head.append(style);
             module.refresh();
@@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
+          transform: function(direction, distance) {
+            if(direction && distance) {
+              if(direction == className.left) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
+                  + 'margin-right: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.right) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
+                  + 'margin-left: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.top) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
+                ;
+              }
+              if(direction == className.bottom) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
+                ;
+              }
+            }
+          },
+          transformProperty: function() {
+            var
+              element    = document.createElement('element'),
+              properties = {
+                'transform'       :'transform',
+                'msTransform'     :'-ms-transform',
+                'MozTransform'    :'-moz-transform',
+                'WebkitTransform' :'-webkit-transform'
+              },
+              property
+            ;
+            for(property in properties){
+              if( element.style[property] !== undefined ){
+                return properties[property];
+              }
+            }
+          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) {
 
 $.fn.sidebar.settings = {
 
-  moduleName  : 'Sidebar',
-  namespace   : 'sidebar',
+  moduleName   : 'Sidebar',
+  namespace    : 'sidebar',
+
+  useTransform : true,
 
-  verbose     : true,
-  debug       : true,
-  performance : true,
+  verbose      : true,
+  debug        : true,
+  performance  : true,
 
-  overlay     : false,
+  overlay      : false,
 
-  side        : 'left',
-  duration    : 500,
+  side         : 'left',
+  duration     : 500,
 
-  onChange    : function(){},
-  onShow      : function(){},
-  onHide      : function(){},
+  onChange     : function(){},
+  onShow       : function(){},
+  onHide       : function(){},
 
   className: {
     active : 'active',
diff --git a/build/uncompressed/modules/sidebar.css b/build/uncompressed/modules/sidebar.css
index 78f9ee239..ba06cda00 100644
--- a/build/uncompressed/modules/sidebar.css
+++ b/build/uncompressed/modules/sidebar.css
@@ -8,11 +8,17 @@
             Sidebar
 *******************************/
 body {
-  -webkit-transition: padding 0.3s ease;
-  -moz-transition: padding 0.3s ease;
-  -o-transition: padding 0.3s ease;
-  -ms-transition: padding 0.3s ease;
-  transition: padding 0.3s ease;
+  -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease;
+  -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease;
+  -o-transition: margin 0.3s ease,
+    transform 0.3s ease
+  ;
+  -ms-transition: margin 0.3s ease,
+    transform 0.3s ease
+  ;
+  transition: margin 0.3s ease,
+    transform 0.3s ease
+  ;
 }
 .ui.sidebar {
   position: fixed;
diff --git a/build/uncompressed/modules/sidebar.js b/build/uncompressed/modules/sidebar.js
index 35528e6d0..9873aff86 100644
--- a/build/uncompressed/modules/sidebar.js
+++ b/build/uncompressed/modules/sidebar.js
@@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) {
         add: {
           bodyCSS: function() {
             var
-              style      = '',
-              direction  = module.get.direction(),
-              moduleSize = (module.is.vertical())
+              style     = '',
+              direction = module.get.direction(),
+              distance  = (module.is.vertical())
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
             if(direction !== className.bottom) {
               style = ''
                 + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + 'html {'
+                + '  background-color: #3E3E3E'
+                + '}'
+                + 'body {'
+                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
                 + '}'
-                + '</style>'
               ;
+              if(settings.useTransform) {
+                style += ''
+                  + 'body.pushed {'
+                  + module.get.transform(direction, distance)
+                  + '}'
+                  + '</style>'
+                ;
+              }
+              else {
+                style += ''
+                  + 'body.pushed {'
+                  + '  margin-' + direction + ': ' + distance + 'px !important;'
+                  + '}'
+                  + '</style>'
+                ;
+              }
             }
             $head.append(style);
             module.refresh();
@@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
+          transform: function(direction, distance) {
+            if(direction && distance) {
+              if(direction == className.left) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
+                  + 'margin-right: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.right) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
+                  + 'margin-left: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.top) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
+                ;
+              }
+              if(direction == className.bottom) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
+                ;
+              }
+            }
+          },
+          transformProperty: function() {
+            var
+              element    = document.createElement('element'),
+              properties = {
+                'transform'       :'transform',
+                'msTransform'     :'-ms-transform',
+                'MozTransform'    :'-moz-transform',
+                'WebkitTransform' :'-webkit-transform'
+              },
+              property
+            ;
+            for(property in properties){
+              if( element.style[property] !== undefined ){
+                return properties[property];
+              }
+            }
+          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) {
 
 $.fn.sidebar.settings = {
 
-  moduleName  : 'Sidebar',
-  namespace   : 'sidebar',
+  moduleName   : 'Sidebar',
+  namespace    : 'sidebar',
+
+  useTransform : true,
 
-  verbose     : true,
-  debug       : true,
-  performance : true,
+  verbose      : true,
+  debug        : true,
+  performance  : true,
 
-  overlay     : false,
+  overlay      : false,
 
-  side        : 'left',
-  duration    : 500,
+  side         : 'left',
+  duration     : 500,
 
-  onChange    : function(){},
-  onShow      : function(){},
-  onHide      : function(){},
+  onChange     : function(){},
+  onShow       : function(){},
+  onHide       : function(){},
 
   className: {
     active : 'active',
diff --git a/node/src/documents/modules/popup.html b/node/src/documents/modules/popup.html
index dba529346..15f81eefc 100755
--- a/node/src/documents/modules/popup.html
+++ b/node/src/documents/modules/popup.html
@@ -29,7 +29,7 @@ type   : 'UI Module'
   <div class="example">
     <h4 class="ui header">Popup</h4>
     <p>A standard popup</p>
-    <i class="sketchy question icon link" data-content="Hello, I am a pop-up."></i>
+    <i class="sketchy circular question icon link" data-content="Hello, I am a pop-up."></i>
   </div>
 
   <h2 class="ui dividing header">Variations</h2>
@@ -37,14 +37,14 @@ type   : 'UI Module'
   <div class="example">
     <h4 class="ui header">Size</h4>
     <p>A popup can be large or small</p>
-    <i class="sketchy question icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
-    <i class="sketchy question icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
+    <i class="sketchy circular question icon link" data-content="Hello. This is a small popup" data-variation="small"></i>
+    <i class="sketchy circular question icon link" data-content="Hello. This is a large popup" data-variation="large"></i>
   </div>
 
   <div class="example">
     <h4 class="ui header">Inverted</h4>
     <p>A popup can have its colors inverted</p>
-    <i class="sketchy question icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
+    <i class="sketchy circular question icon link" data-content="Hello. This is an inverted popup" data-variation="inverted"></i>
   </div>
 
 
@@ -60,7 +60,7 @@ type   : 'UI Module'
   <h4 class="ui header">Including metadata</h4>
   <p>Frequently used metadata like, title, content, html, or arrowOffset or variation, can be included in html metadata<p>
   <div class="ui info icon ignored message">
-    <i class="icon sketchy question circle"></i>
+    <i class="icon sketchy circular question circle"></i>
     <div class="content">
       <div class="header">Specifying Content</div>
       <p>Popups can specify content in three ways:<p>
@@ -72,7 +72,7 @@ type   : 'UI Module'
     </div>
   </div>
   <div class="code" data-type="html">
-    <i class="sketchy question icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
+    <i class="sketchy circular question icon link" data-content="Here is some popup content." data-position="top left" data-variation="black"></i>
   </div>
 
   <h2 class="ui dividing header">Examples</h2>
@@ -80,32 +80,32 @@ type   : 'UI Module'
   <div class="example segment">
     <h4 class="ui header">Positioning</h4>
     <p>A popup can be positioned to any side of an element. If space is not available, it will automatically search for a similar alternative position to use.</p>
-      <i class="sketchy question icon link" data-content="Top Left" data-position="top left"></i>
-      <i class="sketchy question icon link" data-content="Top Center" data-position="top center"></i>
-      <i class="sketchy question icon link" data-content="Top Right" data-position="top right"></i>
-      <i class="sketchy question icon link" data-content="Left Center" data-position="left center"></i>
-      <i class="sketchy question icon link" data-content="Right Center" data-position="right center"></i>
-      <i class="sketchy question icon link" data-content="Bottom Left" data-position="bottom left"></i>
-      <i class="sketchy question icon link" data-content="Bottom Center" data-position="bottom center"></i>
-      <i class="sketchy question icon link" data-content="Bottom Right" data-position="bottom right"></i>
+      <i class="sketchy circular question icon link" data-content="Top Left" data-position="top left"></i>
+      <i class="sketchy circular question icon link" data-content="Top Center" data-position="top center"></i>
+      <i class="sketchy circular question icon link" data-content="Top Right" data-position="top right"></i>
+      <i class="sketchy circular question icon link" data-content="Left Center" data-position="left center"></i>
+      <i class="sketchy circular question icon link" data-content="Right Center" data-position="right center"></i>
+      <i class="sketchy circular question icon link" data-content="Bottom Left" data-position="bottom left"></i>
+      <i class="sketchy circular question icon link" data-content="Bottom Center" data-position="bottom center"></i>
+      <i class="sketchy circular question icon link" data-content="Bottom Right" data-position="bottom right"></i>
   </div>
 
   <div class="example segment">
     <h4 class="ui header">Title</h4>
     <p>A popup can be formatted with a title</p>
-    <i class="sketchy question icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
+    <i class="sketchy circular question icon link" data-title="Dog Breeds" data-content="There are many types of dogs. We don't have time to list them all"></i>
   </div>
 
   <div class="example segment">
     <h4 class="ui header">HTML</h4>
     <p>A popup can be formatted with html</p>
-    <i class="sketchy question icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
+    <i class="sketchy circular question icon link" data-html="<strike>I rescind my comment about cats</strike>"></i>
   </div>
 
-  <div class="transition segment">
+  <div class="no example">
     <h4 class="ui header">Transitions</h4>
     <p>A popup can have different <a href="/modules/transition.html">transitions</a>. Any transition with both an in and out animation can be specified. The following are just a few examples.</p>
-    <i class="sketchy question icon fade link" data-content="This is a different transition"></i>
+    <i class="sketchy circular question icon fade link" data-content="This is a different transition"></i>
     <br><br>
     <div class="code" data-demo="true" data-title="Fade">
     $('.fade.icon')
@@ -114,8 +114,8 @@ type   : 'UI Module'
     ;
     </div>
   </div>
-  <div class="another example">
-    <i class="sketchy question icon slide link" data-content="This is a different transition"></i>
+  <div class="no example">
+    <i class="sketchy circular question icon slide link" data-content="This is a different transition"></i>
     <br><br>
     <div class="code" data-demo="true" data-title="Slide Up">
     $('.slide.icon')
@@ -124,8 +124,8 @@ type   : 'UI Module'
     ;
     </div>
   </div>
-  <div class="another example">
-    <i class="sketchy question icon flip link" data-content="This is a different transition"></i>
+  <div class="no example">
+    <i class="sketchy circular question icon flip link" data-content="This is a different transition"></i>
     <br><br>
     <div class="code" data-demo="true" data-title="Vertical Flip">
     $('.flip.icon')
diff --git a/node/src/files/components/semantic/modules/sidebar.css b/node/src/files/components/semantic/modules/sidebar.css
index 78f9ee239..ba06cda00 100644
--- a/node/src/files/components/semantic/modules/sidebar.css
+++ b/node/src/files/components/semantic/modules/sidebar.css
@@ -8,11 +8,17 @@
             Sidebar
 *******************************/
 body {
-  -webkit-transition: padding 0.3s ease;
-  -moz-transition: padding 0.3s ease;
-  -o-transition: padding 0.3s ease;
-  -ms-transition: padding 0.3s ease;
-  transition: padding 0.3s ease;
+  -webkit-transition: margin 0.3s ease, -webkit-transform 0.3s ease;
+  -moz-transition: margin 0.3s ease, -moz-transform 0.3s ease;
+  -o-transition: margin 0.3s ease,
+    transform 0.3s ease
+  ;
+  -ms-transition: margin 0.3s ease,
+    transform 0.3s ease
+  ;
+  transition: margin 0.3s ease,
+    transform 0.3s ease
+  ;
 }
 .ui.sidebar {
   position: fixed;
diff --git a/node/src/files/components/semantic/modules/sidebar.js b/node/src/files/components/semantic/modules/sidebar.js
index 35528e6d0..9873aff86 100644
--- a/node/src/files/components/semantic/modules/sidebar.js
+++ b/node/src/files/components/semantic/modules/sidebar.js
@@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) {
         add: {
           bodyCSS: function() {
             var
-              style      = '',
-              direction  = module.get.direction(),
-              moduleSize = (module.is.vertical())
+              style     = '',
+              direction = module.get.direction(),
+              distance  = (module.is.vertical())
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
             if(direction !== className.bottom) {
               style = ''
                 + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + 'html {'
+                + '  background-color: #3E3E3E'
+                + '}'
+                + 'body {'
+                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
                 + '}'
-                + '</style>'
               ;
+              if(settings.useTransform) {
+                style += ''
+                  + 'body.pushed {'
+                  + module.get.transform(direction, distance)
+                  + '}'
+                  + '</style>'
+                ;
+              }
+              else {
+                style += ''
+                  + 'body.pushed {'
+                  + '  margin-' + direction + ': ' + distance + 'px !important;'
+                  + '}'
+                  + '</style>'
+                ;
+              }
             }
             $head.append(style);
             module.refresh();
@@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
+          transform: function(direction, distance) {
+            if(direction && distance) {
+              if(direction == className.left) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
+                  + 'margin-right: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.right) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
+                  + 'margin-left: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.top) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
+                ;
+              }
+              if(direction == className.bottom) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
+                ;
+              }
+            }
+          },
+          transformProperty: function() {
+            var
+              element    = document.createElement('element'),
+              properties = {
+                'transform'       :'transform',
+                'msTransform'     :'-ms-transform',
+                'MozTransform'    :'-moz-transform',
+                'WebkitTransform' :'-webkit-transform'
+              },
+              property
+            ;
+            for(property in properties){
+              if( element.style[property] !== undefined ){
+                return properties[property];
+              }
+            }
+          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) {
 
 $.fn.sidebar.settings = {
 
-  moduleName  : 'Sidebar',
-  namespace   : 'sidebar',
+  moduleName   : 'Sidebar',
+  namespace    : 'sidebar',
+
+  useTransform : true,
 
-  verbose     : true,
-  debug       : true,
-  performance : true,
+  verbose      : true,
+  debug        : true,
+  performance  : true,
 
-  overlay     : false,
+  overlay      : false,
 
-  side        : 'left',
-  duration    : 500,
+  side         : 'left',
+  duration     : 500,
 
-  onChange    : function(){},
-  onShow      : function(){},
-  onHide      : function(){},
+  onChange     : function(){},
+  onShow       : function(){},
+  onHide       : function(){},
 
   className: {
     active : 'active',
diff --git a/src/modules/sidebar.js b/src/modules/sidebar.js
index 35528e6d0..9873aff86 100755
--- a/src/modules/sidebar.js
+++ b/src/modules/sidebar.js
@@ -135,20 +135,38 @@ $.fn.sidebar = function(parameters) {
         add: {
           bodyCSS: function() {
             var
-              style      = '',
-              direction  = module.get.direction(),
-              moduleSize = (module.is.vertical())
+              style     = '',
+              direction = module.get.direction(),
+              distance  = (module.is.vertical())
                 ? $module.outerHeight()
                 : $module.outerWidth()
             ;
             if(direction !== className.bottom) {
               style = ''
                 + '<style type="text/css" title="' + namespace + '">'
-                + 'body.pushed {'
-                + '  padding-' + direction + ': ' + moduleSize + 'px !important;'
+                + 'html {'
+                + '  background-color: #3E3E3E'
+                + '}'
+                + 'body {'
+                + ' box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.8);'
                 + '}'
-                + '</style>'
               ;
+              if(settings.useTransform) {
+                style += ''
+                  + 'body.pushed {'
+                  + module.get.transform(direction, distance)
+                  + '}'
+                  + '</style>'
+                ;
+              }
+              else {
+                style += ''
+                  + 'body.pushed {'
+                  + '  margin-' + direction + ': ' + distance + 'px !important;'
+                  + '}'
+                  + '</style>'
+                ;
+              }
             }
             $head.append(style);
             module.refresh();
@@ -202,6 +220,49 @@ $.fn.sidebar = function(parameters) {
               return className.left;
             }
           },
+          transform: function(direction, distance) {
+            if(direction && distance) {
+              if(direction == className.left) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);'
+                  + 'margin-right: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.right) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);'
+                  + 'margin-left: ' + distance + 'px !important;'
+                ;
+              }
+              if(direction == className.top) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);'
+                ;
+              }
+              if(direction == className.bottom) {
+                return ''
+                  + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);'
+                ;
+              }
+            }
+          },
+          transformProperty: function() {
+            var
+              element    = document.createElement('element'),
+              properties = {
+                'transform'       :'transform',
+                'msTransform'     :'-ms-transform',
+                'MozTransform'    :'-moz-transform',
+                'WebkitTransform' :'-webkit-transform'
+              },
+              property
+            ;
+            for(property in properties){
+              if( element.style[property] !== undefined ){
+                return properties[property];
+              }
+            }
+          },
           transitionEvent: function() {
             var
               element     = document.createElement('element'),
@@ -413,21 +474,23 @@ $.fn.sidebar = function(parameters) {
 
 $.fn.sidebar.settings = {
 
-  moduleName  : 'Sidebar',
-  namespace   : 'sidebar',
+  moduleName   : 'Sidebar',
+  namespace    : 'sidebar',
+
+  useTransform : true,
 
-  verbose     : true,
-  debug       : true,
-  performance : true,
+  verbose      : true,
+  debug        : true,
+  performance  : true,
 
-  overlay     : false,
+  overlay      : false,
 
-  side        : 'left',
-  duration    : 500,
+  side         : 'left',
+  duration     : 500,
 
-  onChange    : function(){},
-  onShow      : function(){},
-  onHide      : function(){},
+  onChange     : function(){},
+  onShow       : function(){},
+  onHide       : function(){},
 
   className: {
     active : 'active',
diff --git a/src/modules/sidebar.less b/src/modules/sidebar.less
index decb48fb5..477210e89 100755
--- a/src/modules/sidebar.less
+++ b/src/modules/sidebar.less
@@ -10,11 +10,26 @@
 *******************************/
 
 body {
-  -webkit-transition: padding 0.3s ease;
-  -moz-transition: padding 0.3s ease;
-  -o-transition: padding 0.3s ease;
-  -ms-transition: padding 0.3s ease;
-  transition: padding 0.3s ease;
+  -webkit-transition:
+    margin 0.3s ease,
+    -webkit-transform 0.3s ease
+  ;
+  -moz-transition:
+    margin 0.3s ease,
+    -moz-transform 0.3s ease
+  ;
+  -o-transition:
+    margin 0.3s ease,
+    transform 0.3s ease
+  ;
+  -ms-transition:
+    margin 0.3s ease,
+    transform 0.3s ease
+  ;
+  transition:
+    margin 0.3s ease,
+    transform 0.3s ease
+  ;
 }
 
 .ui.sidebar {
@@ -117,7 +132,6 @@ body {
   transform: translateY(-100%);
 }
 
-
 /*******************************
            Variations
 *******************************/