I have boxes (think oblong chocolate boxes) that I want to expand and show the contents. The content will be another div with text, video, etc., but I'm currently interested in deploying the animation itself.
I have such a job, but the two best sofas leave a gap between them during the animation. Is there a way to tie them together by “unfolding” them?
Demo: JSFiddle
HTML:
<section> <div class="block3d"> <div class="front"> <h4>CHOCOLATE</h4> </div> <div class="top"><h4></h4></div> <div class="back"> <ul> <li>Chocolate</li> <li>Milk</li> <li>Nuts</li> <li>Oranges</li> </ul> <a class="infolink" href="#">Open me</a> </div> <div class="bottom"><h4></h4></div> </div> </section>
JavaScript:
$(document).ready(function(){ $(".block3d .infolink").click(function(e){ openBlock(this, e); }); }); function openBlock(element, event) { event.preventDefault(); $(element).closest('section').addClass('open'); $.scrollTo($(element).closest('section'), {duration: 1000}); }
CSS
section { -webkit-perspective: 800px; -webkit-perspective-origin: 50% 100px; -moz-perspective: 800px; -moz-perspective-origin: 50% 100px; -ms-perspective: 800px; -ms-perspective-origin: 50% 100px; perspective: 800px; perspective-origin: 50% 100px; width: 960px; height: 240px; margin: 10px auto; transition-property: height; transition-timing-function: linear; transition-duration: 0.5s; transition-delay: 100ms; } section.open { height: 960px; } .block3d { position: relative; width: 960px; height: 200px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; margin: 0 auto; -webkit-transform-origin: 0 100px; -moz-transform-origin: 0 100px; -ms-transform-origin: 0 100px; transform-origin: 0 100px; transition-property: transform, display; transition-timing-function: linear; transition-duration: 0.5s; transition-delay: 100ms; } .block3d:hover, .open .block3d { -webkit-transform: rotateX(-180deg); -ms-transform: rotateX(-180deg); transform: rotateX(-180deg); } .block3d div { position: absolute; width: 960px; height: 200px; background-color: rgba(0,0,0,0.4); color: #FFFFFF; } .block3d .back { -webkit-transform: translateZ(-100px) rotateX(180deg); -moz-transform: translateZ(-100px) rotateX(180deg); -ms-transform: translateZ(-100px) rotateX(180deg); transform: translateZ(-100px) rotateX(180deg); background-color: #323232; } .block3d .top { -webkit-transform: rotateX(-270deg) translateY(-100px); -webkit-transform-origin: top center; -moz-transform: rotateX(-270deg) translateY(-100px); -moz-transform-origin: top center; -ms-transform: rotateX(-270deg) translateY(-100px); -ms-transform-origin: top center; transform: rotateX(-270deg) translateY(-100px); transform-origin: top center; } .block3d .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); -moz-transform: rotateX(-90deg) translateZ(100px); -ms-transform: rotateX(-90deg) translateZ(100px); transform: rotateX(-90deg) translateZ(100px); } .block3d .front { -webkit-transform: translateZ(100px); -moz-transform: translateZ(100px); -ms-transform: translateZ(100px); transform: translateZ(100px); } .block3d h4, .block3d ul { margin-left: 480px; background-color: #323232; margin-top: 0; } .block3d h4 { font-size: 20px; text-align: center; padding-top: 90px; height: 110px; width: 300px; } .block3d ul { padding: 40px; height: auto; width: 220px; } .block3d .infolink { display: block; margin-left: 455px; height: 30px; width: 100px; color: #ffffff; text-align: center; padding: 2px; border: 1px dashed #FFFFFF; border-top-right-radius: 30px; border-top-left-radius: 30px; border-bottom: 0; } .open .block3d .top { -webkit-transform: rotateX(-360deg) translateY(-200px) translateZ(100px); -moz-transform: rotateX(-360deg) translateY(-200px) translateZ(100px); transform: rotateX(-360deg) translateY(-200px) translateZ(100px); transition-property: transform; transition-timing-function: linear; transition-duration: 0.5s; transition-delay: 0s; } @-webkit-keyframes openback { 0% {-webkit-transform: translateZ(-100px) rotateX(180deg) translateY(0)} 50% {-webkit-transform: rotateX(270deg) translateZ(300px)} 100% {-webkit-transform: rotateX(360deg) translateY(400px) translateZ(100px)} } @-moz-keyframes openback { 0% {-moz-transform: translateZ(-100px) rotateX(180deg) translateY(0)} 50% {-moz-transform: rotateX(270deg) translateZ(300px)} 100% {-moz-transform: rotateX(360deg) translateY(400px) translateZ(100px)} } @keyframes openback { 0% {transform: translateZ(-100px) rotateX(180deg) translateY(0)} 50% {transform: rotateX(270deg) translateZ(300px)} 100% {transform: rotateX(360deg) translateY(400px) translateZ(100px)} } .open .block3d .back { -webkit-animation: openback 1s 1 linear forwards; -moz-animation: openback 1s 1 linear forwards; animation: openback 1s 1 linear forwards; } .open .block3d .bottom { -webkit-transform: rotateX(-360deg) translateZ(100px) translateY(200px); -moz-transform: rotateX(-360deg) translateZ(100px) translateY(200px); transform: rotateX(-360deg) translateZ(100px) translateY(200px); transition-property: transform; transition-timing-function: linear; transition-duration: 0.5s; transition-delay: 0.0s; } .open .block3d { -webkit-transform: translateZ(100px) rotateX(180deg) translateY(-440px); -moz-transform: translateZ(100px) rotateX(180deg) translateY(-440px); transform: translateZ(100px) rotateX(180deg) translateY(-440px); transition-property: transform; transition-timing-function: linear; transition-duration: 1s; transition-delay: 0s; }
css html5 css-animations
Lizzan
source share