plumcube 0.0.7 → 0.0.8

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    OThlNTVjNjc2ODc3YTcwNjI5NWQwMGU5NWMwZTFmOWU4MjA1MjM5Mg==
+    ZDdmMThiZjk3NTBmNzY4NTdkMmU0OTA5NjJiYmNlNzcyZmExZmQ2ZQ==
   data.tar.gz: !binary |-
-    M2VhZTJlMWRiNzQ0ZGY1Yzg1MTVjY2YzMDAzMDJmYjFjMGFmNmEwYQ==
+    MmRiODcwMjJhZDI0NGE4NWU1MzQ5YTMxNGVjMWYzYjJhNzRkODMzYQ==
 !binary "U0hBNTEy":
   metadata.gz: !binary |-
-    Nzc0MDM0NjkzY2RmMDFiN2Y1M2RlZTIxZWQyNmEyOWZlYmJhMzRkYTIzZmE2
-    YjA1NjkxOWYxNDlkZTg5ZGFlZTJkNjM4Y2FjYTNkZWM4ZTZlYjIzYTdjY2Y3
-    NTY1YzdhMjJlZGI0NGZmNWEwODRjNzJkYzdhNDJhY2RmOWQ3NGM=
+    YTA1YWQyZTI0ZDVjYjVhZGNmZTdkNmIwZjE1MGJkYzc4MWFmYWU4OGIzMGZk
+    OTQzMTliYWNkNzdlMDE1YmNmZWJjNGU2OGFiNTM0Y2RhYjg5MzAyYzc3NmFj
+    YmY4NWUxOTg1NTY1ZjNhYWNiZmU3ZGViYjE4YzQ3MDhhYzEwYmM=
   data.tar.gz: !binary |-
-    MDFkZTUxNDJhYmExOGJhYWMyNDI3NGM0YzBhNDQ0YzVjOWExYWQyMzllNThm
-    Y2U1MDIyZmQyNTJlZTk5MzkzNTM5YWI2OTUyNGVmYjMzMDhhZWVkYzI5YmZm
-    OTE1Y2NkZWM2Y2VhMThmOTk1ZTdhMWI5YjgwNzA2MDUxZjFhYzQ=
+    Y2NkYjRkNGY0YzFiMWVjNmRiZDhjMDkyNDEyM2Q1NWIzNGE3MDA0MjVhYzI5
+    MTIyODNhZDU4NzBkMTM5ZjJlYjI5Y2RjNGE3YjAzMDVlYmFjMzI4NjBhZTg1
+    ZWFlZDU0MDg3NWZjOTFlYjc1YTljOWY4Yjk2ZWJkZjcxMjZhNmE=

data/readme.md

@@ -44,7 +44,7 @@ Import compass and plumcube:
 	
 Include the plumcube mixin in the styles of the outermost wrapper element. The plumcube mixin parameters are:
 
-	@mixin plumcube($x, $y, $z, $perspective, $origin);
+	@mixin plumcube($x, $y, $z, $perspective, $origin)
 	
 	/* ====================================================================================
 	where
@@ -65,4 +65,59 @@ If you wanted a cube 200px x 200px x 200px, with a perspective of 1200px origina
 		margin: 100px 26%;
 	}
 
+You can then apply other styling to the elements within your cube, including rotating it along one of its axes:
+
+	.cube-x {
+		@include transform(rotateX(10deg)); /* rotate the cube 10 degrees along the x-axis */
+		
+		li {
+			opacity: .5; /* set opacity to see all faces of cube */
+			
+			&:nth-child(1) { /* front face */
+				background: #f00; 
+			}
+			&:nth-child(2) { /* right face */
+				background: #ff0; 
+			}
+			&:nth-child(3) { /* back face */
+				background: #ff00ff; 
+			}
+			&:nth-child(4) { /* left face */
+				background: #123456; 
+			}
+			&:nth-child(5) { /* top face */
+				background: #dd0000;
+			}
+			&:nth-child(6) { /* bottom face */
+				background: #000;
+			}
+		}
+	}
+	
+### Take it for a spin
+After you recover from that terrible pun, you can include the `spincube` mixin in your container styles to set the cube on a continuous rotation around one or more of its axes:
+	
+	@mixin spincube($axis, $speed)
+	
+	/* ====================================================================================
+	where
+		$axis = axis to spin
+		$speed = time it takes to complete one rotation, in seconds or milliseconds
+	==================================================================================== */
+	
+You need to call the mixin on the container representing the axis that you want to set spinning:
+
+	.cube-x {
+		@include spincube(x, 200ms);
+	}
+	.cube-y {
+		@include spincube(y, 5s);
+	}
+	.cube-z {
+		@include spincube(z, 1s);
+	}
+
+
+You can technically spin all 3 axes at once, but the animation looks best when kept simple and limited to one axis.
+	
 ### Stay tuned for the next installment, in which I actually attempt to sit down and focus for long enough to complete these instructions!

data/stylesheets/_plumcube.scss

@@ -7,6 +7,18 @@ import helper functions
 cube it up
 ================================================== */
 @mixin plumcube($x, $y, $z, $perspective, $origin) {
+	/* ====================================================================================
+	where
+		$x = cube width, in pixels
+		$y = cube length, in pixels
+		$z = cube depth, in pixels
+		$perspective = distance of shape from screen along z-axis
+					   (smaller numbers create more shape/perspective distortion)
+		$origin = defines the origin of the 3D perspective
+		          (see https://developer.mozilla.org/en-US/docs/Web/CSS/perspective-origin
+				   for all possible values)
+	==================================================================================== */
+	
 	@include perspective($perspective+px);
     @include perspective-origin($origin);
 	width: $x + px;
@@ -64,6 +76,15 @@ cube it up
 /* ==================================================
 360-degree cube rotation
 ================================================== */
-@mixin spincube($direction, $speed) {
-	@include private-animation(private-spin+to_upper_case($direction) $speed linear infinite);
+@mixin spincube($axis, $speed, $reverse:"") {
+	/* ====================================================================================
+	where
+		$axis = axis to spin
+		$speed = time it takes to complete one rotation, in seconds or milliseconds
+	==================================================================================== */
+	@if $reverse != "" {
+		@include private-animation(spin+to_upper_case($axis) $speed linear infinite reverse);
+	} @else {
+		@include private-animation(spin+to_upper_case($axis) $speed linear infinite);
+	}
 }

data/stylesheets/plumcube/_helpers.scss

@@ -20,8 +20,8 @@ animation property builder -> adds -webkit prefix
 /* ==================================================
 css transform for 360-degree spin
 ================================================== */
-@mixin private-spin($axis) {
-	@include private-keyframes(private-spin+$axis) {
+@mixin spin($axis) {
+	@include private-keyframes(spin+$axis) {
 		from {
 			@include transform(rotate+$axis+'(0deg)');
 		}
@@ -34,6 +34,6 @@ css transform for 360-degree spin
 /* ==================================================
 define 360-degree spin for each axis
 ================================================== */
-@include private-spin(X);
-@include private-spin(Y);
-@include private-spin(Z);
+@include spin(X);
+@include spin(Y);
+@include spin(Z);

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: plumcube
 version: !ruby/object:Gem::Version
-  version: 0.0.7
+  version: 0.0.8
 platform: ruby
 authors:
 - Stephanie Plumeri
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-07-23 00:00:00.000000000 Z
+date: 2013-07-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sass