Now spins and aligns correctly, all boxy and shit

markrogers9109 · Sep 30, 2016 · e5a2c2d · e5a2c2d
1 parent dffa547
commit e5a2c2d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 29 deletions.
diff --git a/app/css/style.css b/app/css/style.css
@@ -21,6 +21,7 @@ li a img {
     margin: 25%;
     display: flex;
     justify-content: center;
+    transform: rotate(-45deg);
 }
 
 /*.right {
@@ -52,6 +53,7 @@ li a img {
     height: 700px;
     width: 700px;
     padding: 0;
+    transform: rotate(45deg);
 }
 
 #Nav>ul {

diff --git a/app/index.html b/app/index.html
@@ -24,10 +24,10 @@
                         <a ui-sref="beer-one" id="Top"><img class="beer--logos ABA" src="images/beerwise-logo.png" alt="#"></a>
                     </li>
                     <li class="col-xs-6">
-                        <a ui-sref="beer-two" id="Left"><img class="beer--logos BB" src="images/beer_bb.png" alt="#"></a>
+                        <a ui-sref="beer-two" id="Right"><img class="beer--logos BB" src="images/beer_bb.png" alt="#"></a>
                     </li>
                     <li class="col-xs-6">
-                        <a ui-sref="beer-four" id="Right"><img class="beer--logos other" src="images/casual_logo.png" alt="#"></a>
+                        <a ui-sref="beer-four" id="Left"><img class="beer--logos other" src="images/casual_logo.png" alt="#"></a>
                     </li>
                     <li class="col-xs-6">
                         <a ui-sref="beer-three" id="Bottom"><img class="beer--logos duff" src="images/ABA_Logo.png" alt="#"></a>

diff --git a/app/js/script.js b/app/js/script.js
@@ -2,39 +2,39 @@ var $ = jQuery;
 
 
 $(document).ready(function() {
-    var wheelPosition = 0,
-        wheelRotation = 0,
-        imagePosition = 0;
+    var wheelPosition = 45,
+        wheelRotation = 45,
+        imagePosition = -45;
 
     $('#Top').click(function() {
-        if (wheelPosition === 0) {
+        if (wheelPosition === 45) {
             logoRotation(90);
-        } else if (wheelPosition == 180) {
+        } else if (wheelPosition === 225) {
             logoRotation(-90);
         }
         else return;
     });
 
     $('#Right').click(function() {
-        if (wheelPosition == 90) {
+        if (wheelPosition == 135) {
             logoRotation(-90);
-        } else if (wheelPosition === 270) {
+        } else if (wheelPosition === 315) {
             logoRotation(90);
         } else return;
     });
 
     $('#Bottom').click(function() {
-        if (wheelPosition === 0) {
+        if (wheelPosition === 45) {
             logoRotation(-90);
-        } else if (wheelPosition == 180) {
+        } else if (wheelPosition === 225) {
             logoRotation(90);
         } else return;
     });
 
     $('#Left').click(function() {
-        if (wheelPosition == 90) {
+        if (wheelPosition === 135) {
             logoRotation(90);
-        } else if (wheelPosition == 270) {
+        } else if (wheelPosition === 315) {
             logoRotation(-90);
         } else return;
     });
@@ -43,38 +43,38 @@ $(document).ready(function() {
         wheelRotation += direction;
         imagePosition -= direction;
 
-        if (wheelPosition === 0 && direction == 90) {
+        if (wheelPosition === 45 && direction == 90) {
             $('.beer--logos').css('transform', 'rotate(' + imagePosition + 'deg)');
             $('#Nav').css('transform', 'rotate(' + wheelRotation + 'deg)');
-            wheelPosition = 90;
-        } else if (wheelPosition === 0 && direction == -90) {
+            wheelPosition = 135;
+        } else if (wheelPosition === 45 && direction == -90) {
             $('.beer--logos').css('transform', 'rotate(' + imagePosition + 'deg)');
             $('#Nav').css('transform', 'rotate(' + wheelRotation + 'deg)');
-            wheelPosition = 270;
-        } else if (wheelPosition === 90 && direction == 90) {
+            wheelPosition = 315;
+        } else if (wheelPosition === 135 && direction == 90) {
             $('.beer--logos').css('transform', 'rotate(' + imagePosition + 'deg)');
             $('#Nav').css('transform', 'rotate(' + wheelRotation + 'deg)');
-            wheelPosition = 180;
-        } else if (wheelPosition === 90 && direction == -90) {
+            wheelPosition = 225;
+        } else if (wheelPosition === 135 && direction == -90) {
             $('.beer--logos').css('transform', 'rotate(' + imagePosition + 'deg)');
             $('#Nav').css('transform', 'rotate(' + wheelRotation + 'deg)');
-            wheelPosition = 0;
-        } else if (wheelPosition === 180 && direction == 90) {
+            wheelPosition = 45;
+        } else if (wheelPosition === 225 && direction == 90) {
             $('.beer--logos').css('transform', 'rotate(' + imagePosition + 'deg)');
             $('#Nav').css('transform', 'rotate(' + wheelRotation + 'deg)');
-            wheelPosition = 270;
-        } else if (wheelPosition === 180 && direction == -90) {
+            wheelPosition = 315;
+        } else if (wheelPosition === 225 && direction == -90) {
             $('.beer--logos').css('transform', 'rotate(' + imagePosition + 'deg)');
             $('#Nav').css('transform', 'rotate(' + wheelRotation + 'deg)');
-            wheelPosition = 90;
-        } else if (wheelPosition === 270 && direction == 90) {
+            wheelPosition = 135;
+        } else if (wheelPosition === 315 && direction == 90) {
             $('.beer--logos').css('transform', 'rotate(' + imagePosition + 'deg)');
             $('#Nav').css('transform', 'rotate(' + wheelRotation + 'deg)');
-            wheelPosition = 0;
-        } else if (wheelPosition === 270 && direction == -90) {
+            wheelPosition = 45;
+        } else if (wheelPosition === 315 && direction == -90) {
             $('.beer--logos').css('transform', 'rotate(' + imagePosition + 'deg)');
             $('#Nav').css('transform', 'rotate(' + wheelRotation + 'deg)');
-            wheelPosition = 180;
+            wheelPosition = 225;
         }
     }