plumcube 0.0.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +15 -0
- data/lib/plumcube.rb +1 -0
- data/readme.md +3 -0
- data/stylesheets/_plumcube.scss +69 -0
- data/stylesheets/plumcube/_helpers.scss +39 -0
- metadata +78 -0
checksums.yaml
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
---
|
2
|
+
!binary "U0hBMQ==":
|
3
|
+
metadata.gz: !binary |-
|
4
|
+
N2IyMTYyNjk2NDUyNWNmZmJlYmQ2OTVjZDQ2Zjg4MjIzNDgzOThmMQ==
|
5
|
+
data.tar.gz: !binary |-
|
6
|
+
YjZkN2ExMWNlZjYwNzcwM2Y5Y2M3OWU5ZDM2YzU2NWU2NjYyZTBjOQ==
|
7
|
+
!binary "U0hBNTEy":
|
8
|
+
metadata.gz: !binary |-
|
9
|
+
YWI3ZDdhNDUwYWRiMzkwODIzZWY1ZWI1YjBmYzc5MmM2ZWEzYTZiZWJiZmRk
|
10
|
+
OTkyZWJlN2U4MzJhMGVkMGM5OWNjMDM1YjJmZDJkYzRiNTczNmUzZDNjZWE2
|
11
|
+
OThjODU2ZWNmMjdkODNiZmQ3ZDdmNzkzMWY4N2I0OTEzMzY5YmI=
|
12
|
+
data.tar.gz: !binary |-
|
13
|
+
MWExODNkNzY2NDE3M2Y2MDlmYWY2NWQ2M2Q4Yzc2ZTQ2NzVkZGQ5MjVjN2U0
|
14
|
+
MDUyY2ViMGZmMWE5NDFjN2ZjZWVkN2QxZDc3ZmYyODJlMjNhZDhkMTBlOWRk
|
15
|
+
Y2UwMzBkMTZlODllZDcxNmQ5ZGQwNzcxNjUxOGM4YWVlMmQyY2U=
|
data/lib/plumcube.rb
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
Compass::Frameworks.register("plumcube", :path => "#{File.dirname(__FILE__)}/..")
|
data/readme.md
ADDED
@@ -0,0 +1,69 @@
|
|
1
|
+
/* ==================================================
|
2
|
+
import helper functions
|
3
|
+
================================================== */
|
4
|
+
@import 'plumcube/helpers';
|
5
|
+
|
6
|
+
/* ==================================================
|
7
|
+
cube it up
|
8
|
+
================================================== */
|
9
|
+
@mixin plumcube($x, $y, $z, $perspective, $origin) {
|
10
|
+
@include perspective($perspective+px);
|
11
|
+
@include perspective-origin($origin+'%');
|
12
|
+
width: $x + px;
|
13
|
+
height: $z + px;
|
14
|
+
.cube-z, .cube-y, .cube-x {
|
15
|
+
@include transform-style(preserve-3d);
|
16
|
+
@include transition(all 1s ease-in-out);
|
17
|
+
}
|
18
|
+
.cube-x {
|
19
|
+
list-style: none;
|
20
|
+
margin: 0;
|
21
|
+
padding: 0;
|
22
|
+
position: relative;
|
23
|
+
width: $x + px;
|
24
|
+
height: $y + px;
|
25
|
+
|
26
|
+
li {
|
27
|
+
display: block;
|
28
|
+
position: absolute;
|
29
|
+
&:nth-child(1), &:nth-child(2), &:nth-child(3), &:nth-child(4) {
|
30
|
+
height: $y+px;
|
31
|
+
}
|
32
|
+
&:nth-child(5), &:nth-child(6) {
|
33
|
+
height: $z+px;
|
34
|
+
}
|
35
|
+
&:nth-child(1), &:nth-child(3), &:nth-child(5), &:nth-child(6) {
|
36
|
+
width: $x+px;
|
37
|
+
}
|
38
|
+
&:nth-child(2), &:nth-child(4) {
|
39
|
+
width: $z+px;
|
40
|
+
}
|
41
|
+
&:nth-child(1) {
|
42
|
+
@include transform(translateZ(($z/2)+px));
|
43
|
+
}
|
44
|
+
&:nth-child(2) {
|
45
|
+
@include transform(rotateY(90deg) translateZ($x - ($z/2)+px));
|
46
|
+
}
|
47
|
+
&:nth-child(3) {
|
48
|
+
@include transform(rotateY(180deg) translateZ(($z/2)+px));
|
49
|
+
}
|
50
|
+
&:nth-child(4) {
|
51
|
+
@include transform(rotateY(-90deg) translateZ(($z/2)+px));
|
52
|
+
}
|
53
|
+
&:nth-child(5) {
|
54
|
+
@include transform(rotateX(90deg) translateZ(($z/2)+px));
|
55
|
+
}
|
56
|
+
&:nth-child(6) {
|
57
|
+
@include transform(rotateX(90deg) translateZ(-($x - ($z/2))+px));
|
58
|
+
|
59
|
+
}
|
60
|
+
}
|
61
|
+
}
|
62
|
+
}
|
63
|
+
|
64
|
+
/* ==================================================
|
65
|
+
360-degree cube rotation
|
66
|
+
================================================== */
|
67
|
+
@mixin spincube($direction, $speed) {
|
68
|
+
@include private-animation(private-spin+to_upper_case($direction) $speed linear infinite);
|
69
|
+
}
|
@@ -0,0 +1,39 @@
|
|
1
|
+
/* ==================================================
|
2
|
+
keyframes animation builder -> adds -webkit prefix
|
3
|
+
================================================== */
|
4
|
+
@mixin private-keyframes ($animation_name) {
|
5
|
+
@-webkit-keyframes $animation_name {
|
6
|
+
@content;
|
7
|
+
}
|
8
|
+
@keyframes $animation_name {
|
9
|
+
@content;
|
10
|
+
}
|
11
|
+
}
|
12
|
+
/* ==================================================
|
13
|
+
animation property builder -> adds -webkit prefix
|
14
|
+
================================================== */
|
15
|
+
@mixin private-animation($params) {
|
16
|
+
animation: $params;
|
17
|
+
-webkit-animation: $params;
|
18
|
+
}
|
19
|
+
|
20
|
+
/* ==================================================
|
21
|
+
css transform for 360-degree spin
|
22
|
+
================================================== */
|
23
|
+
@mixin private-spin($axis) {
|
24
|
+
@include private-keyframes(private-spin+$axis) {
|
25
|
+
from {
|
26
|
+
@include transform(rotate+$axis+'(0deg)');
|
27
|
+
}
|
28
|
+
to {
|
29
|
+
@include transform(rotate+$axis+'(360deg)');
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}
|
33
|
+
|
34
|
+
/* ==================================================
|
35
|
+
define 360-degree spin for each axis
|
36
|
+
================================================== */
|
37
|
+
@include private-spin(X);
|
38
|
+
@include private-spin(Y);
|
39
|
+
@include private-spin(Z);
|
metadata
ADDED
@@ -0,0 +1,78 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: plumcube
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.6
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Stephanie Plumeri
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2013-07-19 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: sass
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ! '>'
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 3.2.9
|
20
|
+
type: :runtime
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ! '>'
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: 3.2.9
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: compass
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ! '>='
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: 0.12.1
|
34
|
+
type: :runtime
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ! '>='
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: 0.12.1
|
41
|
+
description: turn a list into a 3D object of any shape and size... as long as that
|
42
|
+
shape is a cube
|
43
|
+
email: stephanie.plumeri@gmail.com
|
44
|
+
executables: []
|
45
|
+
extensions: []
|
46
|
+
extra_rdoc_files: []
|
47
|
+
files:
|
48
|
+
- readme.md
|
49
|
+
- lib/plumcube.rb
|
50
|
+
- stylesheets/plumcube/_helpers.scss
|
51
|
+
- stylesheets/_plumcube.scss
|
52
|
+
homepage: https://github.com/s-plum/plumcube
|
53
|
+
licenses:
|
54
|
+
- MIT
|
55
|
+
- GPL-2
|
56
|
+
metadata: {}
|
57
|
+
post_install_message:
|
58
|
+
rdoc_options: []
|
59
|
+
require_paths:
|
60
|
+
- lib
|
61
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
62
|
+
requirements:
|
63
|
+
- - ! '>='
|
64
|
+
- !ruby/object:Gem::Version
|
65
|
+
version: '0'
|
66
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
67
|
+
requirements:
|
68
|
+
- - ! '>='
|
69
|
+
- !ruby/object:Gem::Version
|
70
|
+
version: '0'
|
71
|
+
requirements: []
|
72
|
+
rubyforge_project:
|
73
|
+
rubygems_version: 2.0.5
|
74
|
+
signing_key:
|
75
|
+
specification_version: 4
|
76
|
+
summary: a css 3D animation extension for compass
|
77
|
+
test_files: []
|
78
|
+
has_rdoc:
|