Skip to content

Instantly share code, notes, and snippets.

@LCamel

LCamel/3d.html

Last active August 31, 2015 01:48
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save LCamel/cd54aff24c21a0d348a3 to your computer and use it in GitHub Desktop.
Save LCamel/cd54aff24c21a0d348a3 to your computer and use it in GitHub Desktop.
Download ZIP
3d
Raw
3d.html
<html>
<head>
</head>
<body id="body" bgcolor="black">
<div class="wrap" style="left: 500px; top: 100px">
<div class="cube">
<div class="front">🙊</div>
<div class="back" style="background: #44ff44; font-size: 400%"></div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left">🙉</div>
<div class="right">🙈</div>
</div>
</div>
<div class="wrap" style="transform: rotate(-90deg); left: -750px; top: -370px;">
<div class="cube">
<div class="front" >🙉</div>
<div class="back">🙈</div>
<div class="top"></div>
<div class="bottom"></div>
<div class="left" style="background: #44ff44; font-size: 400%"></div>
<div class="right">🙊</div>
</div>
</div>
<style type="text/css">
.wrap {
perspective: 800px;
perspective-origin: 10% 100px;
position: relative;
}
.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
font-size: 800%;
}
.back {
transform: translateZ(-100px) rotateY(180deg);
/* background: #00ff00; */
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
/* background: yellow; */
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
/* background: red; */
}
.top {
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
/* background: blue; */
}
.bottom {
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
.cube {
animation: spin 5s infinite linear;
}
/*
@keyframes spin2 {
from { transform: rotateZ(0); }
to { transform: rotateZ(360deg); }
}
.cube2 {
animation: spin2 5s infinite linear;
}
*/
</style>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment