Animated 3d box/cube written in html/css. Based it on a tutorial from David Walsh. http://davidwalsh.name/css-cube
A Pen by Cliff Pyles on CodePen.
Animated 3d box/cube written in html/css. Based it on a tutorial from David Walsh. http://davidwalsh.name/css-cube
A Pen by Cliff Pyles on CodePen.
<!-- JJ --> | |
<div class="page"> | |
<div class="container"> | |
<div class="shadow-wrapper"> | |
<div class="shadow"> | |
<div> </div> | |
</div> | |
</div> | |
<div class="box-wrapper"> | |
<div class="box-faces"> | |
<div class="box-face box-face--is-front"> | |
<p> | |
<i class="icon-rocket icon-4x"></i> | |
</p> | |
</div> | |
<div class="box-face box-face--is-back"> | |
<p> | |
<i class="icon-rocket icon-4x"></i> | |
</p> | |
</div> | |
<div class="box-face box-face--is-top"> </div> | |
<div class="box-face box-face--is-bottom"> </div> | |
<div class="box-face box-face--is-left"> | |
<p> | |
<i class="icon-rocket icon-4x"></i> | |
</p> | |
</div> | |
<div class="box-face box-face--is-right"> | |
<p> | |
<i class="icon-rocket icon-4x"></i> | |
</p> | |
</div> | |
</div><!-- end of .box --> | |
</div><!-- end of .box-wrapper --> | |
</div><!-- /.container --> | |
</div><!-- /.page --> | |
<!-- SDG --> |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
$body--Background: #F0F1F1; | |
$icon-rocket--Color: #4F5D75; | |
body{ | |
background-color: $body--Background; | |
} | |
.page { | |
color: #222; | |
display: flex; | |
align-items: center; | |
align-content: center; | |
justify-content: center; | |
height: 100vh; | |
text-align: center; | |
} | |
.container { | |
margin-top: -200px; | |
} | |
.box-wrapper { | |
perspective: 800px; | |
perspective-origin: 50% 100px; | |
} | |
.box-faces { | |
position: relative; | |
width: 200px; | |
transform-style: preserve-3d; | |
} | |
.box-faces p { | |
padding: 40px 0; | |
} | |
.box-face { | |
outline: 1px solid #999; | |
position: absolute; | |
width: 200px; | |
height: 200px; | |
opacity: 0.98; | |
box-shadow: inset 0px 0px 100px #555; | |
} | |
.box-face--is-back { | |
transform: translateZ(-100px) rotateY(180deg); | |
background-color: #eee; | |
} | |
.box-face--is-right { | |
transform: rotateY(-270deg) translateX(100px); | |
transform-origin: top right; | |
background-color: #ddd; | |
} | |
.box-face--is-left { | |
transform: rotateY(270deg) translateX(-100px); | |
transform-origin: center left; | |
background-color: #ddd; | |
} | |
.box-face--is-top { | |
transform: rotateX(-90deg) translateY(-100px); | |
transform-origin: top center; | |
background-color: #fafafa; | |
} | |
.box-face--is-bottom { | |
transform: rotateX(90deg) translateY(100px); | |
transform-origin: bottom center; | |
background-color: #bbb; | |
} | |
.box-face--is-front { | |
transform: translateZ(100px); | |
background-color: #eee; | |
} | |
@keyframes spin { | |
from { transform: rotateY(0); } | |
to { transform: rotateY(360deg); } | |
} | |
.box-faces, .shadow { | |
animation: spin 15s infinite linear; | |
} | |
.icon-rocket { color: $icon-rocket--Color; } | |
.shadow-wrapper { | |
perspective: 800px; | |
perspective-origin: 50% 100px; | |
/* -webkit-perspective: 800px; | |
-webkit-perspective-origin: 50% 100px;*/ | |
} | |
.shadow { | |
position: relative; | |
width: 200px; | |
transform-style: preserve-3d; | |
} | |
.shadow div{ | |
position: absolute; | |
width: 200px; | |
height: 200px; | |
top: 0px; | |
opacity: 0.98; | |
box-shadow: 0px 0px 100px #000; | |
transform: rotateX(90deg) translateY(100px); | |
transform-origin: bottom center; | |
} |