add tech class for tile: tile-active-right(left) for small click anim…

…ation
vj-chandera · Jun 13, 2012 · c4ae5ba · c4ae5ba
1 parent 799562b
commit c4ae5ba
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 13 deletions.
diff --git a/demo/css/metro.css b/demo/css/metro.css
diff --git a/demo/js/metro.js b/demo/js/metro.js
@@ -48,10 +48,10 @@
                 //console.log(mouse);
                 if (mouse.x < el.outerWidth() / 2) {
                     console.log("left");
-                    el.toggleClass("rotate-y-left");
+                    el.toggleClass("tile-active-left");
                 } else {
                     console.log("right");
-                    el.toggleClass("rotate-y-right");
+                    el.toggleClass("tile-active-right");
                 }
             }).mouseup(function(e){
                 var mouse = {
@@ -60,10 +60,10 @@
                 };
                 if (mouse.x < el.outerWidth() / 2) {
                     console.log("left");
-                    el.toggleClass("rotate-y-left");
+                    el.toggleClass("tile-active-left");
                 } else {
                     console.log("right");
-                    el.toggleClass("rotate-y-right");
+                    el.toggleClass("tile-active-right");
                 }
             }).mouseenter(function(){
                 if (el.hasClass("tile-multi-content")){

diff --git a/demo/tiles.html b/demo/tiles.html
@@ -127,11 +127,6 @@
 
     <div class="container" id="demo">
         <div  class="metro">
-            <h1 class="start">Tiles / Плитка</h1>
-        </div>
-
-        <div  class="metro">
-            <br />
             <div class="metro-sections">
                 <div class="metro-section" id="section1">
 
@@ -312,9 +307,6 @@ <h1 class="start">Tiles / Плитка</h1>
                 </div>
             </div>
         </div>
-        <div class="metro">
-            <p class="tertiary-info">tiles click animation is currently disabled but in progress...</p>
-        </div>
         <footer class="metro footer">
             <p class="pull-right"><a href="#">Наверх</a></p>
 

diff --git a/less/tiles.less b/less/tiles.less
@@ -19,6 +19,13 @@
             width: 960px;
             position: relative;
 
+            -moz-transform: perspective(600px);
+            -webkit-transform: perspective(600px);
+            -ms-transform: perspective(600px);
+            -o-transform: perspective(600px);
+            transform: perspective(600px);
+
+
             .next-section {
                 position: absolute;
                 top: 0px;
@@ -35,6 +42,22 @@
                 outline: 3px #225a68 solid !important;
             }
 
+            .tile.tile-active-right {
+                -ms-transform: perspective(600px) rotateY( 5deg );
+                -o-transform: perspective(600px) rotateY( 5deg );
+                -moz-transform: perspective(600px) rotateY( 5deg );
+                -webkit-transform: perspective(600px) rotateY( 5deg );
+                transform: perspective(600px) rotateY( 5deg );
+            }
+
+            .tile.tile-active-left {
+                -ms-transform: perspective(600px) rotateY( -5deg );
+                -o-transform: perspective(600px) rotateY( -5deg );
+                -moz-transform: perspective(600px) rotateY( -5deg );
+                -webkit-transform: perspective(600px) rotateY( -5deg );
+                transform: perspective(600px) rotateY( -5deg );
+            }
+
             .tile {
                 display: block;
                 background-color: @blue;