diff options
author | Jose Antonio Marquez | 2012-02-15 20:37:48 -0800 |
---|---|---|
committer | Jose Antonio Marquez | 2012-02-15 20:37:48 -0800 |
commit | 89b5e793ea88ef235b54b6e1d1c379698d3e612b (patch) | |
tree | 4d29118f35df77ca6b423119a4ff61694a442cbf /node_modules/ninja-components/image3d.reel/image3d.html | |
parent | 9d2c2a80483415d7560b00cda5519153db23e241 (diff) | |
parent | d366c0bd1af6471511217ed574083e15059519b5 (diff) | |
download | ninja-89b5e793ea88ef235b54b6e1d1c379698d3e612b.tar.gz |
Merge branch 'refs/heads/NinjaInternal' into Color
Diffstat (limited to 'node_modules/ninja-components/image3d.reel/image3d.html')
-rw-r--r-- | node_modules/ninja-components/image3d.reel/image3d.html | 95 |
1 files changed, 95 insertions, 0 deletions
diff --git a/node_modules/ninja-components/image3d.reel/image3d.html b/node_modules/ninja-components/image3d.reel/image3d.html new file mode 100644 index 00000000..f7b46bd0 --- /dev/null +++ b/node_modules/ninja-components/image3d.reel/image3d.html | |||
@@ -0,0 +1,95 @@ | |||
1 | <!DOCTYPE html> | ||
2 | <!-- <copyright> | ||
3 | This file contains proprietary software owned by Motorola Mobility, Inc.<br/> | ||
4 | No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/> | ||
5 | (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. | ||
6 | </copyright> --> | ||
7 | <html> | ||
8 | <head> | ||
9 | <script type="text/montage-serialization"> | ||
10 | { | ||
11 | "owner": { | ||
12 | "module": "montage/ui/image3d.reel", | ||
13 | "name": "Image3D", | ||
14 | "properties": { | ||
15 | "element": {"#": "Image3D"}, | ||
16 | "left": {"#": "left"}, | ||
17 | "right": {"#": "right"} | ||
18 | } | ||
19 | } | ||
20 | } | ||
21 | </script> | ||
22 | </head> | ||
23 | <style> | ||
24 | .Image3D { | ||
25 | width: 320px; | ||
26 | height: 320px; | ||
27 | -webkit-transform-style: preserve-3d; | ||
28 | -webkit-backface-visibility: hidden; | ||
29 | } | ||
30 | .Image3D .left { | ||
31 | position: absolute; | ||
32 | width: 320px; | ||
33 | height: 30px; | ||
34 | -webkit-transform-origin: 0 0 0; | ||
35 | -webkit-transform: translate3d(0.5px, 320px, -30px) rotateY(-90deg) rotateZ(-90deg); | ||
36 | line-height: 30px; | ||
37 | font-size: 14px; | ||
38 | font-family: Helvetica, Arial, sans-serif; | ||
39 | text-align: center; | ||
40 | color: white; | ||
41 | background: black; | ||
42 | -webkit-backface-visibility: hidden; | ||
43 | } | ||
44 | .Image3D .right { | ||
45 | position: absolute; | ||
46 | width: 320px; | ||
47 | height: 30px; | ||
48 | -webkit-transform-origin: 0 0 0; | ||
49 | -webkit-transform: translate3d(319.5px, 320px, 0) rotateY(90deg) rotateZ(-90deg); | ||
50 | line-height: 30px; | ||
51 | font-size: 14px; | ||
52 | font-family: Helvetica, Arial, sans-serif; | ||
53 | text-align: center; | ||
54 | color: white; | ||
55 | background: black; | ||
56 | -webkit-backface-visibility: hidden; | ||
57 | } | ||
58 | .Image3D .top { | ||
59 | position: absolute; | ||
60 | width: 320px; | ||
61 | height: 30px; | ||
62 | -webkit-transform-origin: 0 0 0; | ||
63 | -webkit-transform: translate3d(0, .5px, -30px) rotateX(90deg); | ||
64 | background: #444; | ||
65 | -webkit-backface-visibility: hidden; | ||
66 | } | ||
67 | .Image3D .bottom { | ||
68 | position: absolute; | ||
69 | width: 320px; | ||
70 | height: 30px; | ||
71 | -webkit-transform-origin: 0 0 0; | ||
72 | -webkit-transform: translate3d(0, 319.5px, 0) rotateX(-90deg); | ||
73 | background: #444; | ||
74 | -webkit-backface-visibility: hidden; | ||
75 | } | ||
76 | .Image3D .back { | ||
77 | position: absolute; | ||
78 | width: 320px; | ||
79 | height: 320px; | ||
80 | background: inherit; | ||
81 | -webkit-transform-origin: 0 0 0; | ||
82 | -webkit-transform: translate3d(320px, 0, -30px) rotateY(-180deg); | ||
83 | -webkit-backface-visibility: hidden; | ||
84 | } | ||
85 | </style> | ||
86 | <body> | ||
87 | <div id="Image3D" class="Image3D"> | ||
88 | <div id="left" class="left"></div> | ||
89 | <div id="right" class="right"></div> | ||
90 | <div class="top"></div> | ||
91 | <div class="bottom"></div> | ||
92 | <div id="back" class="back"></div> | ||
93 | </div> | ||
94 | </body> | ||
95 | </html> | ||