"3d box"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/raman-ch/pen/qNZVov?depth=everything&order=popularity&page=70&q=pack&show_forks=false" /> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'> <style class="cp-pen-styles">body { background-color: #e578e1; /*top colour*/ background-image: -webkit-linear-gradient(top, #e578e1, #616dab); background-image: linear-gradient(to bottom, #e578e1, #616dab); font-family: 'Roboto', sans-serif; } main { margin-top: 80px; height: 100vh; padding-top: 100px; -webkit-perspective: 1000px; perspective: 1000px; } main .card { padding: 40px 30px; border-radius: 20px; position: relative; background: white; } main .card:before { content: ''; position: absolute; display: inline-block; border-radius: 20px; height: 100%; -webkit-transition-duration: 0.2s; transition-duration: 0.2s; width: 100%; box-shadow: 0 20px 100px 0 #3a4f6c; top: 0px; left: 0px; } main .card .info { margin-bottom: 20px; } main .card .info.stats { text-align: center; } main .card .info.stats .stat { border-radius: 50%; display: inline-block; padding: 10px; } main .card .info.stats .stat h1.number { color: #ccc; padding: 0px; margin: 0px; font-size: 20px; } main .card .info.stats .stat h6.title { margin: 0px; padding: 0px; padding-top: 5px; } main .card .info label { color: #7f8c8d; font-weight: normal; font-size: 12px; } main .card .info h3 { margin: 0px; padding: 0px; font-size: 16px; } main .card .actions { margin-top: 10px; } .btn-theme { background: transparent; border: 1px solid #FFF; color: #FFF; border-radius: 50px; } .btn-theme.success { color: #27ae60; padding: 20px; border-color: #27ae60; margin-top: 28px; } .box { position: relative; width: 250px; margin-top: -35%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .box.pack-of-20 { height: 250px; } .box.marlboro div.top { background: #414342; } .box.marlboro div.left { background: #2d2f2e; } .box.marlboro div.right { background: #2d2f2e; } .box.marlboro div.back { background: #232524; } .box.marlboro div.bottom { background: #414342; } .box div { height: 410px; width: 100%; line-height: 100px; text-align: center; background: rgba(190, 0, 0, 0.1); display: block; position: absolute; } .box div.top { width: 100%; height: 80px; background: #bb8948; -webkit-transform: rotateX(90deg); margin-top: -40px; } .box div.bottom { background: #333 !important; -webkit-transform: translateZ(-35px); transform: translateZ(-35px); box-shadow: 0 0px 40px 10px rgba(38, 29, 58, 0.5); } .box div.back { width: 100%; background: #694e32; background: red; height: 75px; -webkit-transform: rotateX(90deg); bottom: -197px; } .box div.left { width: 75px; background: #8a6741; -webkit-transform: rotateY(-90deg) translateZ(38px); } .box div.right { width: 70px; background: #8a6741; -webkit-transform: rotateY(90deg) translateZ(215px); } .box div.front { -webkit-transform: translateZ(40px); transform: translateZ(40px); } #bname { font-size: 60px; font-weight: bold; color: #735ca7; letter-spacing: 5px; } .hero { font-size: 70px; text-align: center; color: #FFF; position: relative; top: -100px; font-weight: bold; letter-spacing: 5px; } footer { padding: 60px 0px; position: relative; bottom: 0px; margin-top: 60px; background: rgba(0, 0, 0, 0.05); color: #FFF; } </style></head><body> <main> <div class="container"> <h4 class="text-center text-uppercase hero">3D Box Effect</h4> <div class="row"> <div class="col-md-3"></div> <div class="col-xs-12 col-md-8"> <div class="card"> <div class="row"> <div class="col-xs-6"> <div class="cig-holder"> <div class="box pack-of-20 marlboro"> <div class="top"></div> <div class="right"></div> <div class="bottom"></div> <div class="left"></div> <div class="front"> <img src="https://s13.postimg.org/bed2w0v4n/marlboro.jpg" alt="" class="img-responsive" /> </div> <div class="back"></div> </div> </div> </div> <div class="col-xs-6"> <div> <div class="info"> <label for="name">Name</label> <h3 id="bname">Marlboro</h3> </div> <div class="actions"> <button class="btn btn-block btn-theme success">I smoke this</button> </div> </div> </div> </div> </div> </div> </div> </div> </main> <footer> <div class="container"> <div class="row"> <div class="col-xs-12 text-center"> <div> <h6>Made with <span class="text-danger"> ♥ </span> by <a href="http://raman.ch" target>Raman Choudhary </a></h6> </div> </div> </div> </div> </footer> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script >var factor = 20; $('main').mousemove(function() { var left = parseInt(event.pageX - $(this).offset().left); var top = parseInt(event.pageY - $(this).offset().top); $(this).find('.box').css({ transform: "rotateY(" + ((left / factor-20)) + "deg) rotateX(" + ((top / factor-20)) + "deg) scale(1.05)", transitionDuration: '0s' }); }); $('main').mouseleave(function() { $(this).find('.box').css({ transform: "rotateY(3deg) rotateX(10deg) scale(1)", transitionDuration: '0.5s' }); }) //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Kit

Questions / Comments: