CSS 3D Cube

HTML
<div class="scene"> <div class="cube"> <div class="side back"> <div class="guides"></div> <span>BACK</span> </div> <div class="side top"> <div class="guides"></div> <span>TOP</span> </div> <div class="side bottom"> <div class="guides"></div> <span>BOTTOM</span> </div> <div class="side front"> <div class="guides"></div> <span>FRONT</span> </div> </div> </div>
CSS
.scene { width: 300px; height: 300px; margin: 100px auto 0; perspective: 1200px; } .cube { position: relative; width: 300px; height: 300px; transform-style: preserve-3d; transform: translateZ(-150px) rotateX(0deg); animation: example 15s linear infinite; } .side { position: absolute; width: 300px; height: 300px; box-sizing: border-box; background-color: #999; background-size: 100% 100%; background-repeat: no-repeat; padding: 120px 0; font: 50px/1 'Trebuchet MS', sans-serif; color: #fff; text-transform: uppercase; text-align: center; } .side::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.15); } .side span { position: relative; display: block; } .back span { animation: back 15s linear infinite; } .top span { animation: top 15s linear infinite; } .bottom span { animation: bottom 15s linear infinite; } .front span { animation: front 15s linear infinite; } .guides { position: absolute; top: 0; left: 50px; width: 200px; height: 100%; border-style: dotted; border-width: 0 1px; color: rgba(255, 255, 255, 0.6); } .guides::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 100%; border-left: 1px dotted; } .back { transform: translateZ(-150px) rotateX(180deg); } .top { transform: translateY(-150px) rotateX(90deg); } .bottom { transform: translateY(150px) rotateX(270deg); } .front { transform: translateZ(150px); } .back { background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/back.jpg); } .top { background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/top.jpg); } .bottom { background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/bottom.jpg); } .front { background-image: url(http://askd.rocks/pres/rd-ft/assets/pictures/front.jpg); } @keyframes example { 0% { transform: translateZ(-150px) rotateX(0deg); } 15% { transform: translateZ(-150px) rotateX(90deg); } 25% { transform: translateZ(-150px) rotateX(90deg); } 40% { transform: translateZ(-150px) rotateX(180deg); } 50% { transform: translateZ(-150px) rotateX(180deg); } 65% { transform: translateZ(-150px) rotateX(270deg); } 75% { transform: translateZ(-150px) rotateX(270deg); } 90% { transform: translateZ(-150px) rotateX(360deg); } 100% { transform: translateZ(-150px) rotateX(360deg); } } @keyframes front { 0% { transform: translateY(0px) } 15% { transform: translateY(-100px); } 25% { transform: translateY(-100px); } 40% { transform: translateY(0px); } 50% { transform: translateY(0px); } 65% { transform: translateY(100px); } 75% { transform: translateY(100px); } 90% { transform: translateY(0px); } 100% { transform: translateY(0px); } } @keyframes bottom { 0% { transform: translateY(100px) } 15% { transform: translateY(0px); } 25% { transform: translateY(0px); } 40% { transform: translateY(-100px); } 50% { transform: translateY(-100px); } 65% { transform: translateY(0px); } 75% { transform: translateY(0px); } 90% { transform: translateY(100px); } 100% { transform: translateY(100px); } } @keyframes back { 0% { transform: translateY(0px) } 15% { transform: translateY(100px); } 25% { transform: translateY(100px); } 40% { transform: translateY(0px); } 50% { transform: translateY(0px); } 65% { transform: translateY(-100px); } 75% { transform: translateY(-100px); } 90% { transform: translateY(0px); } 100% { transform: translateY(0px); } } @keyframes top { 0% { transform: translateY(-100px) } 15% { transform: translateY(0px); } 25% { transform: translateY(0px); } 40% { transform: translateY(100px); } 50% { transform: translateY(100px); } 65% { transform: translateY(0px); } 75% { transform: translateY(0px); } 90% { transform: translateY(-100px); } 100% { transform: translateY(-100px); } }
JAVASCRIPT
Expand for more options Login