"3D services"
Bootstrap 3.0.0 Snippet by sam1225

<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="container"> <header class="main-header clearfix"> <img class="logo" src="http://gdurl.com/78rD"> <h1 class="name">3DTransform <span>Gallery</span></h1> </header> <div class="content clearfix"> <div class="cube-container"> <div class="photo-cube"> <img class="front"src="http://gdurl.com/PdNJ" alt=""> <div class="back photo-desc"> <h3>Earth from Space</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <a href="#" class="button">download</a> </div> <img class="left" src="http://gdurl.com/zDJz" alt=""> <img class="right" src="http://gdurl.com/JLdx" alt=""> </div> </div> <div class="cube-container"> <div class="photo-cube"> <img class="front" src="http://gdurl.com/oxTp" alt=""> <div class="back photo-desc"> <h3>Space Images</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <a href="#" class="button">download</a> </div> <img class="left" src="http://gdurl.com/A2BF" alt=""> <img class="right" src="http://gdurl.com/wt4v" alt=""> </div> </div> <div class="cube-container"> <div class="photo-cube"> <img class="front" src="http://gdurl.com/tvtR" alt=""> <div class="back photo-desc"> <h3>The Milky Way</h3> <p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo.</p> <a href="#" class="button">download</a> </div> <img class="left" src="http://gdurl.com/tvtR" alt=""> <img class="right" src="http://gdurl.com/VjHH" alt=""> </div> </div> </div> </div>
/* ================================= Base Element Styles ==================================== */ * { box-sizing: border-box; } body { font: 1em/1.5 'Open Sans', sans-serif; color: #373737; background: #eaeaea; margin: 0; } a { text-decoration: none; } h1, h2, h3 { text-transform: uppercase; } h2 { font-size: 1.125em; color: #4a89ca; font-weight: 600; margin: 0; } h3 { font-size: 1.3em; line-height: 1.25em; margin-top: .85em; margin-bottom: .5em; } p { font-size: .875em; line-height: 1.4; margin: 0 0 1.5em; } /* ================================= Base Layout Styles ==================================== */ /* ---- Layout Containers ---- */ .container, .content { margin: auto; } .container { width: 94.02985075%; max-width: 1260px; padding: 0 2.25em 4em; background: #fff; } .main-header { text-align: center; padding: 2.8em 0 3.8em; } .cube-container { max-width: 200px; text-align: center; margin: 0 auto 4.5em; } /* ---- Page Elements ---- */ .name { font-size: 1.65em; font-weight: 800; margin: 0 0 1.5em; line-height: 1; } .name span { font-weight: 300; margin-left: -7px; } .logo { width: 45px; margin-bottom: .4em; cursor: pointer; } .button { font-size: .8em; color: #fff; width: 90%; line-height: 1.15; font-weight: 700; display: block; text-decoration: none; text-transform: uppercase; padding: .95em 0; border-radius: .5em; background: rgba(74,137,202, .8); margin: auto; } /* ---- Photo Overlay ---- */ .photo-desc { font-size: .85em; color: #fff; padding: 1.1em 1em 0; background: #345d88; } /* ---- Float clearfix ---- */ .clearfix::after { content: " "; display: table; clear: both; } /* ================================= Media Queries ==================================== */ @media (min-width: 769px) { .cube-container { float: left; margin-left: 16.6%; } } @media (min-width: 1025px) { .cube-container:first-child { margin-left: 0; } .cube-container:last-child{ float: right; } .content { max-width: 900px; margin: auto; } } /* ================================= Button Transitions ==================================== */ .button { transition: background .3s; } .button:hover { background: rgba(74,137,202, 1); } /* ================================= Photo 3D Transforms & Transitions ==================================== */ .cube-container { box-shadow: 0 18px 40px 5px rgba(0,0,0,.4); perspective: 800px; } .photo-cube { transition: transform 2s ease-in-out; width: 220px; height: 200px; transform-style: preserve-3d; } .photo-cube:hover { transform: rotateY(-270deg); } .front, .back, .left, .right { width: 100%; height: 100%; display: block; position: absolute; } .front { transform: translate3d(0,0,110px); } .back { transform: translateZ(-110px) rotateY(270deg); transform-origin: center left; } .left { transform: rotateY(-270deg) translate3d(110px, 0, 0); transform-origin: top right; } .right { transform: translateZ(-110px) rotateY(180deg); }

Related: See More


Questions / Comments: