diff options
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> | ||