"3d cube"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="cube"> <div class="flippety"> <h1>Flippity</h1> </div> <div class="flop"> <h2>Flop</h2> </div> </div>
@charset "UTF-8"; /* Set-up */ body { color: #066a75; text-transform: uppercase; font-family: sans-serif; font-size: 100%; background: #F4F6F8; padding: 3em 0 0 0; line-height: 62px; -webkit-perspective: 1000px; } /* Container box to set the sides relative to */ .cube { width: 30%; text-align: center; margin: 0 auto; height: 200px; -webkit-transition: -webkit-transform .33s; transition: transform .33s; /* Animate the transform properties */ -webkit-transform-style: preserve-3d; transform-style: preserve-3d; /* <-NB */ } /* The two faces of the cube */ .flippety, .flop { background: #f7f7f7; border: 1px solid rgba(147, 184, 189, 0.8); -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, 0.3), 0 0 8px 5px rgba(208, 223, 226, 0.4) inset; box-shadow: 0 5px 20px rgba(105, 108, 109, 0.3), 0 0 8px 5px rgba(208, 223, 226, 0.4) inset; height: 200px; } /* Position the faces */ .flippety { -webkit-transform: translateZ(100px); transform: translateZ(100px); } .flop { -webkit-transform: rotateX(-90deg) translateZ(-100px); transform: rotateX(-90deg) translateZ(-100px); } /* Rotate the cube */ .cube:hover { -webkit-transform: rotateX(90deg); transform: rotateX(90deg); /* Text bleed at 90º */ }

Related: See More


Questions / Comments: