1/* 2 * Copyright (C) 2013 Google Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions are 6 * met: 7 * 8 * * Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * * Redistributions in binary form must reproduce the above 11 * copyright notice, this list of conditions and the following disclaimer 12 * in the documentation and/or other materials provided with the 13 * distribution. 14 * * Neither the name of Google Inc. nor the names of its 15 * contributors may be used to endorse or promote products derived from 16 * this software without specific prior written permission. 17 * 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 */ 30 31.accelerometer-stage { 32 -webkit-perspective: 700px; 33 -webkit-perspective-origin: 50% 50%; 34 width: 200px; 35 height: 130px; 36} 37 38.accelerometer-box { 39 pointer-events:none; 40 margin-top: -54px; 41 margin-left: -40px; 42 position: absolute; 43 top: 50%; 44 left: 50%; 45 width: 80px; 46 height: 108px; 47 -webkit-transform-style: preserve-3d; 48} 49 50.accelerometer-box section { 51 margin-top: -54px; 52 margin-left: -40px; 53 position: absolute; 54 display: block; 55 overflow: hidden; 56 top: 50%; 57 left: 50%; 58 -webkit-transform-style: flat; 59 -webkit-box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.7); 60} 61 62.accelerometer-box .front { 63 border:15px solid black; 64 width: 80px; 65 height: 107px; 66 background-color: gray; 67 -webkit-transform: translate3d(0px, 0px, 10px); 68} 69 70.accelerometer-box .back { 71 width: 80px; 72 height: 107px; 73 background-color: black; 74 -webkit-transform: rotateY(-180deg) translate3d(0px, 0px, 10px); 75} 76 77.accelerometer-box .top { 78 overflow: hidden; 79 width: 80px; 80 height: 20px; 81 background-color: #75CE89; 82 -webkit-transform: rotateX(-90deg) translate3d(0px, 0px, -10px); 83} 84 85.accelerometer-box .bottom { 86 overflow: hidden; 87 width: 80px; 88 height: 20px; 89 background-color: #865C6C; 90 -webkit-transform: rotateX(90deg) translate3d(0px, 0px, -97px); 91} 92 93.accelerometer-box .left { 94 width: 20px; 95 height: 107px; 96 background-color: #7992CB; 97 -webkit-transform: rotateY(90deg) translate3d(0px, 0px, 70px); 98} 99 100.accelerometer-box .right { 101 width: 20px; 102 height: 107px; 103 background-color: #7992CB; 104 -webkit-transform: rotateY(-90deg) translate3d(0px, 0px, 10px); 105} 106 107.accelerometer-axis-input-container { 108 margin-bottom: 10px; 109} 110 111.accelerometer-inputs-cell { 112 vertical-align: top; 113} 114 115.accelerometer-reset-button { 116 width: 100%; 117}