<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 ----------> <h1> Box animation </h1> <div class="box_border">Box</div> <br> <h1> Button Press Animation </h1> <button class="buttonAnimation">Button Click Here</button> <br><br> <h1> Image Mouse Rotation </h1> <div class="animation_rolling"> <div class="animation"> <div class="side"><img src="https://res.cloudinary.com/www-googleg-com/image/upload/v1482820944/Project/TestWheel/images/bg.jpg" alt="Jimmy Eat World"></div> <div class="side back">Jimmy Eat World</div> </div> </div>

.box_border { background: #2db34a; border-radius: 6px; cursor: pointer; height: 95px; line-height: 95px; text-align: center; transition-property: background, border-radius; transition-duration: 1s; transition-timing-function: linear; width: 95px; } .box_border:hover { background: #ff7b29; border-radius: 120%; } /* button */ .buttonAnimation { border: 0; background: #0087cc; border-radius: 4px; box-shadow: 0 5px 0 #006599; color: #fff; cursor: pointer; font: inherit; margin: 0; outline: 0; padding: 12px 20px; transition: all .1s linear; } .buttonAnimation:active { box-shadow: 0 2px 0 #006599; transform: translateY(3px); } /* transation */ .animation_rolling { cursor: pointer; height: 300px; perspective: 600; position: relative; width: 300px; } .animation { height: 100%; position: absolute; transform-style: preserve-3d; transition: all 1s ease-in-out; width: 100%; } .animation:hover { transform: rotateY(180deg); } .animation .side { backface-visibility: hidden; border-radius: 6px; height: 100%; position: absolute; overflow: hidden; width: 100%; } .animation .back { background: #eaeaed; color: #0087cc; text-align: center; transform: rotateY(180deg); }