anim-3d-obj 1.0.9 → 1.0.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -157
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,159 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
This is component-library files on here are imported from: https://github.com/mdnelles/anim-3d-objs-launcher
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
The program does the leg work with regard to calculating translationZ depth and config on the fly.
|
|
3
|
+
That version is browser launchable (has App.tsx file)
|
|
5
4
|
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
Install sequence
|
|
9
|
-
|
|
10
|
-
```
|
|
11
|
-
npm install anim-3d-objs
|
|
12
|
-
```
|
|
13
|
-
|
|
14
|
-
## Examples
|
|
15
|
-
|
|
16
|
-
All sided simple https://codesandbox.io/s/anim-3d-obj-all-sides-simple-sdy1q0
|
|
17
|
-
|
|
18
|
-
Two sided simple https://codesandbox.io/s/anim-3d-obj-2-sides-simple-9wognm
|
|
19
|
-
|
|
20
|
-
90 degree wobble on X axis https://codesandbox.io/s/anim-3d-obj-wobblex-08mxqe
|
|
21
|
-
|
|
22
|
-
speed wobble(y) 3 sides https://codesandbox.io/s/anim-3d-obj-3-sides-wobble-y-axis-dceqdp
|
|
23
|
-
|
|
24
|
-
## usage
|
|
25
|
-
|
|
26
|
-
```
|
|
27
|
-
<Cuboid
|
|
28
|
-
width={300}
|
|
29
|
-
height={200}
|
|
30
|
-
depth={100}
|
|
31
|
-
perspectiveOrigin='50% 50%'
|
|
32
|
-
zIndex={10}
|
|
33
|
-
animSpecs={animSpecs}
|
|
34
|
-
custom={custom}
|
|
35
|
-
faces={faceprops}
|
|
36
|
-
global={global}
|
|
37
|
-
>
|
|
38
|
-
{}
|
|
39
|
-
</Cuboid>
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
example spec for global config and 6 sided cuboid
|
|
43
|
-
|
|
44
|
-
```
|
|
45
|
-
const faceprops = {
|
|
46
|
-
front: true,
|
|
47
|
-
back: true,
|
|
48
|
-
left: true,
|
|
49
|
-
right: true,
|
|
50
|
-
top: true,
|
|
51
|
-
bottom: true,
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
const global: object = {
|
|
55
|
-
// // face individual styles (over rides global)
|
|
56
|
-
css: `
|
|
57
|
-
border: 1px solid #00f;
|
|
58
|
-
background-color: red;
|
|
59
|
-
color:white;
|
|
60
|
-
opacity: 0.9;
|
|
61
|
-
backface-visibility: visible;
|
|
62
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
63
|
-
`,
|
|
64
|
-
body: "Hi I am global",
|
|
65
|
-
};
|
|
66
|
-
const animSpecs: object = {
|
|
67
|
-
anim1: "Y360",
|
|
68
|
-
anim2: "X360",
|
|
69
|
-
anim1duration: 5,
|
|
70
|
-
anim2duration: 23,
|
|
71
|
-
anim1count: "infinite",
|
|
72
|
-
anim1low: "-120",
|
|
73
|
-
anim2hi: "120",
|
|
74
|
-
anim2low: "-81",
|
|
75
|
-
anim2count: "infinite",
|
|
76
|
-
anim1direction: "normal",
|
|
77
|
-
anim2direction: "normal",
|
|
78
|
-
};
|
|
79
|
-
|
|
80
|
-
const custom: object = {
|
|
81
|
-
// // face individual styles (over rides global)
|
|
82
|
-
bottom: {
|
|
83
|
-
css: `
|
|
84
|
-
border: 1px solid #00f;
|
|
85
|
-
background-color: red;
|
|
86
|
-
opacity: 0.9;
|
|
87
|
-
color:white;
|
|
88
|
-
fontFace:sans;
|
|
89
|
-
line-
|
|
90
|
-
backface-visibility: visible;
|
|
91
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
92
|
-
fontFamily: Cochin;
|
|
93
|
-
|
|
94
|
-
`,
|
|
95
|
-
body: "BOTTOMs UP!",
|
|
96
|
-
},
|
|
97
|
-
front: {
|
|
98
|
-
css: `
|
|
99
|
-
border: 1px solid #00f;
|
|
100
|
-
background-color: blue;
|
|
101
|
-
opacity: 0.9;
|
|
102
|
-
backface-visibility: visible;
|
|
103
|
-
color:white;
|
|
104
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
105
|
-
line-height:10;
|
|
106
|
-
text-align:center;
|
|
107
|
-
`,
|
|
108
|
-
body: "FRONT FACING!",
|
|
109
|
-
},
|
|
110
|
-
left: {
|
|
111
|
-
css: `
|
|
112
|
-
border: 1px solid #00f;
|
|
113
|
-
background-color: green;
|
|
114
|
-
opacity: 0.9;
|
|
115
|
-
backface-visibility: visible;
|
|
116
|
-
color:white;
|
|
117
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
118
|
-
line-height:10;
|
|
119
|
-
text-align:center;
|
|
120
|
-
`,
|
|
121
|
-
body: "LEFTY",
|
|
122
|
-
},
|
|
123
|
-
top: {
|
|
124
|
-
css: `
|
|
125
|
-
border: 1px solid #00f;
|
|
126
|
-
background-color: purple;
|
|
127
|
-
opacity: 0.9;
|
|
128
|
-
backface-visibility: visible;
|
|
129
|
-
color:white;
|
|
130
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
131
|
-
line-height:6;
|
|
132
|
-
text-align:center;
|
|
133
|
-
`,
|
|
134
|
-
body: "TOP DAWG",
|
|
135
|
-
},
|
|
136
|
-
right: {
|
|
137
|
-
css: `
|
|
138
|
-
border: 1px solid #00f;
|
|
139
|
-
background-color: orange;
|
|
140
|
-
opacity: 0.9;
|
|
141
|
-
backface-visibility: visible;
|
|
142
|
-
color:blue;
|
|
143
|
-
font-family: Arial, Helvetica, sans-serif;
|
|
144
|
-
line-height:10;
|
|
145
|
-
text-align:center;
|
|
146
|
-
`,
|
|
147
|
-
body: "RIGHT SIDE",
|
|
148
|
-
},
|
|
149
|
-
back: {},
|
|
150
|
-
};
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
## Authors
|
|
154
|
-
|
|
155
|
-
- [@mdnelles](https://github.com/mdnelles)
|
|
156
|
-
|
|
157
|
-
## Keywords
|
|
158
|
-
|
|
159
|
-
3d animate react css styles cuboid cube box spin
|
|
5
|
+
This repo is for the npm published version
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"url": "https://github.com/mdnelles/anim-3d-objs-launcher"
|
|
6
6
|
},
|
|
7
7
|
"homepage": "https://github.com/mdnelles/anim-3d-objs",
|
|
8
|
-
"version": "1.0.
|
|
8
|
+
"version": "1.0.11",
|
|
9
9
|
"description": "A component library for getting people started with easy to re-use components for everyday projects.",
|
|
10
10
|
"main": "dist/cjs/index.js",
|
|
11
11
|
"module": "dist/esm/index.js",
|