Requested by Toph Tucker.
Mystery box
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8" /> | |
<style> | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
.container { | |
width: 300px; | |
height: 500px; | |
margin: 100px auto 0 auto; | |
position: relative; | |
perspective: 2000px; | |
-webkit-perspective: 2000px; | |
} | |
.cube { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
transform-style: preserve-3d; | |
-webkit-transform-style: preserve-3d; | |
animation: spin 5s infinite linear; | |
-webkit-animation: spin 5s infinite linear; | |
} | |
.questionmark { | |
position: absolute; | |
width: 300px; | |
height: 300px; | |
pointer-events: none; | |
background: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjExOSIgaGVpZ2h0PSIxMTQiPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMEE2RTAiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNi4xLDQ1TDMxLDUuNkw5NC4yLDYuNUwxMTMsNTIuOAoJTDgwLjMsNjdMODAuNSw3Ni4xTDUwLjYsNzYuNkw1MC44LDU2LjZMNjkuOCw0Mi44TDcyLjYsMzkuOUw0OC4yLDM2LjZMNDAuMiw2My41WiI+PC9wYXRoPgo8cGF0aCBmaWxsPSIjRkZGRkZGIiBzdHJva2U9IiMwMEE2RTAiIHN0cm9rZS13aWR0aD0iOCIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNNDkuNiwxMTAuM0w4Mi45LDExMC4yTDgwLjcsODMuMgoJNTAuMyw4My40WiI+PC9wYXRoPgo8L3N2Zz4=") no-repeat center center; | |
background-size: 178px 171px; | |
animation: spin 5s infinite linear reverse; | |
-webkit-animation: spin 5s infinite linear reverse; | |
} | |
.side { | |
margin: 0; | |
width: 300px; | |
height: 300px; | |
position: absolute; | |
cursor: pointer; | |
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+CjxyZWN0IGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4yKSIgc3Ryb2tlPSJub25lIiB4PSIwIiB5PSIwIiB3aWR0aD0iMjUiIGhlaWdodD0iMjUiPjwvcmVjdD4Kd2lkdGg9JzUwJyBoZWlnaHQ9JzUwJyZndDsKPHJlY3QgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjIpIiBzdHJva2U9Im5vbmUiIHg9IjI1IiB5PSIyNSIgd2lkdGg9IjI1IiBoZWlnaHQ9IjI1Ij48L3JlY3Q+Cjwvc3ZnPg=="); | |
} | |
a { | |
display: block; | |
width: 100%; | |
height: 100%; | |
} | |
.cube { | |
transform: translateZ(-100px) rotateX(-90deg); | |
-webkit-transform: translateZ(-100px) rotateX(-90deg); | |
} | |
.front { | |
background-color: rgba(44,155,222,0.6); | |
transform: rotateX(-12deg) rotateY(45deg) translateZ(150px); | |
animation: fade 5s infinite linear -1.25s; | |
-webkit-animation: fade 5s infinite linear -1.25s; | |
} | |
.back { | |
background-color: rgba(43,236,136,0.6); | |
transform: rotateX(168deg) rotateY(-45deg) rotateZ(180deg) translateZ(150px); | |
animation: fade 5s infinite linear -3.75s; | |
-webkit-animation: fade 5s infinite linear -3.75s; | |
} | |
.right { | |
background-color: rgba(153,242,87,0.6); | |
transform: rotateX(-12deg) rotateY(135deg) translateZ(150px); | |
animation: fade 5s infinite linear; | |
-webkit-animation: fade 5s infinite linear; | |
} | |
.left { | |
background-color: rgba(255,135,58,0.6); | |
transform: rotateX(-12deg) rotateY(-45deg) translateZ(150px); | |
animation: fade 5s infinite linear -2.5s; | |
-webkit-animation: fade 5s infinite linear -2.5s; | |
} | |
.top { | |
background-color: rgba(239,67,148,0.6); | |
transform: rotateX(78deg) rotateZ(-45deg) translateZ(150px); | |
} | |
.bottom { | |
background-color: rgba(115,63,172,0.6); | |
transform: rotateX(-102deg) rotateZ(45deg) translateZ(150px); | |
} | |
@keyframes fade { | |
from { opacity: 1; } | |
12.5% { opacity: 0.3; } | |
62.5% { opacity: 0.3; } | |
75% { opacity: 1; } | |
} | |
@-webkit-keyframes fade { | |
from { opacity: 1; } | |
12.5% { opacity: 0.3; } | |
62.5% { opacity: 0.3; } | |
75% { opacity: 1; } | |
} | |
@keyframes spin { | |
from { transform: rotateY(0deg); } | |
to { transform: rotateY(-360deg); } | |
} | |
@-webkit-keyframes spin { | |
from { -webkit-transform: rotateY(0deg); } | |
to { -webkit-transform: rotateY(-360deg); } | |
} | |
</style> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="cube"> | |
<div class="side front"></div> | |
<div class="side back"></div> | |
<div class="side right"></div> | |
<div class="side left"></div> | |
<div class="side top"></div> | |
<div class="side bottom"></div> | |
<div class="questionmark"></div> | |
</div> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> | |
<script> | |
var user = "tophtucker"; | |
// Ditching fetch() for Safari | |
d3.json("https://api.github.com/users/" + user + "/gists",function(err, gists){ | |
gists = gists.filter(function(gist){ | |
return gist.files && gist.files["index.html"]; | |
}); | |
d3.shuffle(gists); | |
d3.selectAll(".side") | |
.data(gists) | |
.append("a") | |
.attr("target", "_blank") | |
.attr("href", function(gist){ | |
return "https://bl.ocks.org/" + user + "/" + gist.id; | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment