body{background-color:black;} .clear{clear:both;} .controls{ width:100%; max-width: 800px; margin-bottom:8px; } .cbcontrol{ font-size:50px; float:left; color:white; width:48%; text-align:center; background-color:silver; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #cbControlRight{ margin-right:4%; } .cbcontrol:hover{cursor:pointer;} .stage{ background-color: #000000; float: left; height: 330px; overflow: hidden; width:100%; max-width: 800px; z-index: 10; position:relative; -webkit-backface-visibility:hidden; } section{ margin-top:40px; } .cbImage{ width:200px; height:268px; float:left; margin:25px 0px 25px 0px; color:white; box-shadow: 0px 5px 10px 0px #D6D6D6; position:absolute; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .cbImage img{ width:100%; height:100%; } .inactiveLeft{ -webkit-transform:perspective(500px) rotateY(60deg); -O-transform:perspective(500px) rotateY(60deg); transform:perspective(500px) rotateY(60deg); -webkit-transition:all .5s ease-out; -O-transition:all .5s ease-out; transition:all .5s ease-out; box-shadow: 12px 0px 20px 0px #d6d6d6; } .inactiveRight{ -webkit-transform:perspective(500px) rotateY(-60deg); -O-transform:perspective(500px) rotateY(-60deg); transform:perspective(500px) rotateY(-60deg); -webkit-transition:all .5s ease-out; -O-transition:all .5s ease-out; transition:all .5s ease-out; box-shadow: -12px 0px 20px 0px #d6d6d6; } .active{ z-index:100; -webkit-transform:perspective(500px) rotateY(0deg); -O-transform:perspective(500px) rotateY(0deg); transform:perspective(500px) rotateY(0deg); -webkit-transition:all .5s ease-out; -O-transition:all .5s ease-out; transition:all .5s ease-out; } .intro{ color:#fff; }