"tilt car demo"
Bootstrap 3.3.0 Snippet by rayrc

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html><head> <link rel="alternate" type="application/json+oembed" href="http://codepen.io/api/oembed?url=http%3A%2F%2Fcodepen.io%2Fbefamous%2Fpen%2FKIgqh&format=json" title="TiltShift - Car" /> <link href="http://assets.cdpn.io/assets/global/global-NoMQ-ba0752896eeb4636f4bfa7df4595e755.css" media="all" rel="stylesheet" type="text/css" /> <link href="http://assets.cdpn.io/assets/editor/editor-5b4e0c360562463d9d757813cb6830dd.css" media="all" rel="stylesheet" type="text/css" /> <meta name="description" content="To produce the results in this image, depth was created by meticulously slicing and painting distinct layers that can be shifted in space to produce a ..."> <link href="http://assets.cdpn.io/assets/editor/themes/twilight-b3983cc5c27af8e8545ee07059b347e6.css" id="cm-theme" media="screen" rel="stylesheet" type="text/css" /> <link href="http://assets.cdpn.io/assets/editor/layouts/top-6b287aa9bd8940f5c0057886d853996a.css" media="screen" rel="stylesheet" type="text/css" /> <style id="cm-font-family"> .CodeMirror { font-family: Monaco, MonoSpace; } </style> <style id="cm-font-size"> .CodeMirror { font-size: 15px; } </style> <g id="icon-text"> <polygon points="44.937,10 0,10 0,55.171 24.117,90 41.296,77.165 26.218,55.171 44.937,55.171"/> <polygon points="100,10 55.062,10 55.062,55.171 79.183,90 96.361,77.165 81.284,55.171 100,55.171"/> </g> <path id="icon-check" d="M34.357,91.176L0,56.604L16.687,39.81l18.157,18.264l48.954-49.25L100,25.125L34.357,91.176z"/> <g id="icon-user"> <circle cx="50" cy="25" r="25"/> <path d="M75,62.5H25c-6.903,0-12.5,5.597-12.5,12.5v25H25h50h12.5V75C87.5,68.097,81.903,62.5,75,62.5z"/> </g> <path id="icon-file" d="M56.2,0H12.5v100h75V31.2L56.2,0z M25,87.5v-75h25v25h25v50H25z"/> </defs> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style="display: none;"> <defs> <g id="icon-editor-top"> <rect x="72.521" width="27.479" height="48.365"/> <rect y="55.952" width="100" height="44.048"/> <rect x="36.26" width="27.479" height="48.365"/> <rect width="27.479" height="48.365"/> </g> <g id="icon-editor-left"> <rect width="48.365" height="27.479"/> <rect x="55.951" width="44.049" height="100"/> <rect y="36.262" width="48.365" height="27.479"/> <rect y="72.521" width="48.365" height="27.479"/> </g> <g id="icon-editor-right"> <rect x="51.637" y="72.521" width="48.363" height="27.479"/> <rect width="44.048" height="100"/> <rect x="51.637" y="36.261" width="48.363" height="27.479"/> <rect x="51.637" width="48.363" height="27.479"/> </g> </defs> </svg> <base href="http://demo.famo.us/tiltshift-car/" /> <link media="all" rel="stylesheet" type="text/css" href="http://demo.famo.us/torque/css/famous.css" /> <link media="all" rel="stylesheet" type="text/css" href="http://demo.famo.us/torque/css/ui.css" /> <link media="all" rel="stylesheet" type="text/css" href="http://demo.famo.us/torque/css/fonts.css" /> <link media="all" rel="stylesheet" type="text/css" href="http://demo.famo.us/torque/css/famous-signup.css" /> <script src="http://demo.famo.us/tiltshift-car/famous.lib.js"></script></head> <body> </body></html>
/* begin styling */ html { background-color: #ccc; color: white; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 14px; } #main { -webkit-perspective: 500px; perspective: 500px; } h1, h2, h3 { font-family: 'Avenir Next W10 Medium'; font-size: 24px; } p { font-family: 'Avenir Next W01 Thin'; font-size: 18px; line-height: 24px; } a { font-family: 'Avenir Next W10 Medium'; } .backfaceVisible { backface-visibility: visible; -webkit-backface-visibility: visible; /* Chrome and Safari */ -moz-backface-visibility: visible; /* Firefox */ } .white { color: white; } .bor_clear { border: 0; } .bor_clear:focus { outline: 0 } .left { float: left; } .right { float: right; } .inline { display: inline; } .block { display: block; } .clear { clear: both; } .absolute { position: absolute } .description-panel { background-color: rgba(77, 77, 77, 0.5); } .description-closing-tab { border: 1px solid white; } .no-user-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .textinput { height:40px; width:100%; padding-left: 6px; padding-top: 0px; color: rgba(255, 255, 255, .750); font-size: 24px; font-family: 'Avenir Next W10 Thin'; background-color:rgba(0, 0, 0, 0.0); border: 1px solid rgba(255, 255, 255, .750); outline-width: 0px; } .textinput:focus { color: rgba(255, 255, 255, 1.0); border: 1px solid rgba(255, 255, 255, 1.0); outline-width: 0px; } .submit { padding-top: 9px; padding-left: 4px; line-height: 24px; font-size: 24px; font-family: 'Avenir Next W10 Thin'; } .progress-fill { background-color: #222; } .progress-back { border: 1px solid #333; }

Related: See More


Questions / Comments: