3D Pyramid CSS

HTML
<div class="container"> <div class="piramid leftrot"> <div class="top"></div> <div class="sidet side1"></div> <div class="sidet side2"></div> <div class="sidet side3"></div> <div class="sidet side4"></div> <div class="side-mini-top side1"></div> <div class="side-mini-top side2"></div> <div class="side-mini-top side3"></div> <div class="side-mini-top side4"></div> </div> <div class="piramid rightrot"> <div class="side side1"></div> <div class="side side2"></div> <div class="side side3"></div> <div class="side side4"></div> <div class="bottom"></div> <div class="side-mini side1"></div> <div class="side-mini side2"></div> <div class="side-mini side3"></div> <div class="side-mini side4"></div> </div> </div> <!-- PROFILE CARD --> <div id="container-floating"> <a href="https://plus.google.com/105749628523180076386/posts" target="_blank"><span class="profile-name">Simone</span></a> <div id="container-a"> <div id="badge"> </div> <div id="letter"> <a href="https://plus.google.com/105749628523180076386/posts"><span>S</span></a> </div> </div> <a href="http://codepen.io/collection/XyrMQr/" target="_blank"><div class="nds nd1" data-toggle="tooltip" data-placement="left" data-original-title="Codepen"></div></a> <a href=" https://twitter.com/simoberny" target="_blank"><div class="nds nd3" data-toggle="tooltip" data-placement="left" data-original-title="Twitter"></div></a> <a href="https://plus.google.com/105749628523180076386/posts" target="_blank"><div class="nds nd4" data-toggle="tooltip" data-placement="left" data-original-title="G+"></div></a> </div>
SCSS
html, body{ margin: 0; background: #111; } .container{ width: 400px; height: 275px; display: block; position: relative; margin-left: auto; margin-right: auto; margin-top: 5vh; perspective: 1200px; transform-style: preserve-3d; transform: rotateX(-20deg); .rightrot{ animation: rotation 8s infinite linear; } .leftrot{ animation: rotation-rev 8s infinite linear; } .piramid{ display: block; width: 100%; height: 100%; position: relative; transform-style: preserve-3d; margin: auto; .top{ width: 200px; height: 200px; background: cyan; position: absolute; opacity: 0.2; margin: auto; left: 0; right: 0; transform: rotateX(90deg); top: 2px; } .bottom{ width: 200px; height: 200px; background: cyan; position: absolute; opacity: 0.2; margin: auto; left: 0; right: 0; transform: rotateX(90deg); bottom: 2px; } .sidet{ position: absolute; margin: auto; bottom: 0; left: 0; right: 0; width: 0; height: 0; transform-origin: center bottom; border-top: 200px solid cyan; border-left: 100px solid rgba(0,0,0,0); border-right: 100px solid rgba(0,0,0,0); border-bottom: 00px solid rgba(0,0,0,0); transition: transform .3s ease-in-out; animation: shadowing-top 8s linear infinite; opacity: 0.4; } .side{ position: absolute; margin: auto; left: 0; top: 0; right: 0; width: 0; height: 0; transform-origin: center top; border-top: 0px solid rgba(0,0,0,0); border-left: 100px solid rgba(0,0,0,0); border-right: 100px solid rgba(0,0,0,0); border-bottom: 200px solid cyan; transition: transform .3s ease-in-out; animation: shadowing 8s linear infinite; opacity: 0.4; //box-shadow: 0px 1px 10px #111; &:hover{ transition: opacity 0.3s; opacity: 0; } } .side-mini{ position: absolute; margin: auto; left: 0; bottom: 50%; right: 0; width: 0; height: 0; transform-origin: center top; border-top: 0px solid rgba(0,0,0,0); border-left: 50px solid rgba(0,0,0,0); border-right: 50px solid rgba(0,0,0,0); border-bottom: 100px solid lawngreen; transition: transform .3s ease-in-out; opacity: 0.3; } .side-mini-top{ position: absolute; margin: auto; left: 0; top: 50%; right: 0; width: 0; height: 0; transform-origin: center bottom; border-top: 100px solid lawngreen; border-left: 50px solid rgba(0,0,0,0); border-right: 50px solid rgba(0,0,0,0); border-bottom: 0px solid rgba(0,0,0,0); transition: transform .3s ease-in-out; opacity: 0.3; } .side1{ transform: rotateZ(-30deg) rotateY(90deg); } .side2{ transform: rotateZ(30deg) rotateY(90deg); animation-delay: 4s; } .side3{ transform: rotateX(-30deg); animation-delay: 6s; } .side4{ transform: rotateX(30deg); animation-delay: 2s; } } .base{ position: absolute; bottom: 0; left: 0; right: 0; margin: auto; width: 0; height: 0; background: rgba(10,10,10,1); transform: rotateX(90deg); box-shadow: 0px 5px 20px 90px #111; opacity: 0.5; } } @-webkit-keyframes shadowing { 0% { border-bottom-color: cyan; } 50%{ border-bottom-color: darken(cyan, 20); } 100% { border-bottom-color: cyan; } } @-webkit-keyframes shadowing-top { 0% { border-top-color: cyan; } 50%{ border-top-color: darken(cyan, 20); } 100% { border-top-color: cyan; } } @-webkit-keyframes rotation { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @-webkit-keyframes rotation-rev { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(-360deg); } } //PROFILE CARD $transition: all 0.3s; $shadow-L1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); $shadow-L2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); $shadow-L3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); #container-a{ border-radius: 50%; width: 60px; height: 60px; position: fixed; top: 20px; right: 20px; overflow: hidden; transition: $transition; box-shadow: $shadow-L3; /*&:hover{ width: 150px; border-radius: 50px; transition: $transition; }*/ #badge{ width: 100%; height: 100%; background-image: url("https://lh3.googleusercontent.com/-X-aQXHatDQY/Uy86XLOyEdI/AAAAAAAAAF0/TBEZvkCnLVE/w140-h140-p/fb3a11ae-1fb4-4c31-b2b9-bf0cfa835c27"); background-size: 100%; transition: $transition; position: absolute; &:hover .codepen{ display: block; } } &:hover #letter{ display: block; } &:hover #badge{ width: 150px; height: 150px; transition: $transition; filter: blur(7px); } #letter{ display: none; z-index: 20; width: 100%; height: 100%; position: absolute; span{ font-family: 'Roboto'; font-size: 32px; color: white; text-align: center; line-height: 60px; margin: auto; left: 0; right: 0; position: absolute; cursor: pointer; } } } #container-floating{ position: fixed; width: 60px; height: 60px; top: 20px; right: 20px; z-index: 50px; &:hover{ height: 400px; width: 60px; top: 20px; right: 20px; } &:hover .nds{ animation: bounce-nds 0.1s linear; animation-fill-mode: forwards; } &:hover .nd3{ animation-delay: 0.08s; } &:hover .nd4{ animation-delay: 0.15s; } &:hover .nd5{ animation-delay: 0.2s; } .nds{ width: 40px; height: 40px; border-radius: 50%; position: fixed; z-index: 300; transform: scale(0); right: 33px; cursor: pointer; &:hover{ box-shadow: $shadow-L3; transition: $transition; width: 50px; right: 25px; height: 50px; } } .nd1{ background: white url("http://blog.codepen.io/wp-content/uploads/2012/06/Button-Fill-Black-Large.png"); background-size: 100%; top: 110px; animation-delay: 0.1s; animation: bounce-out-nds 0.3s linear; animation-fill-mode: forwards; box-shadow: $shadow-L2; transition: $transition; } .nd3{ background: white url("https://cdn3.iconfinder.com/data/icons/free-social-icons/67/twitter_circle_color-512.png"); background-size: 100%; top: 165px; animation-delay: 0.15s; animation: bounce-out-nds 0.15s linear; animation-fill-mode: forwards; box-shadow: $shadow-L2; transition: $transition; } .nd4{ background: url("http://www.studiotomasi.org/images/gplusicon.svg"); background-size: 100%; top: 225px; animation-delay: 0.1s; animation: bounce-out-nds 0.1s linear; animation-fill-mode: forwards; box-shadow: $shadow-L2; transition: $transition; } } @keyframes bounce-nds{ from {opacity: 0;} to {opacity: 1; transform: scale(1);} } @keyframes bounce-out-nds{ from {opacity: 1; transform: scale(1);} to {opacity: 0; transform: scale(0);} } .profile-name{ line-height: 60px; left: -70px; position: absolute; font-family: 'Roboto'; color: #455a64; } .profile-name:hover{ text-decoration: underline; } a:link, a:visited{ text-decoration: none; }
JAVASCRIPT
Expand for more options Login