Skip to content

Instantly share code, notes, and snippets.

@veltman
Last active May 16, 2019 16:47
Show Gist options
  • Save veltman/a60ea5bb84b8cae8160511789be6e492 to your computer and use it in GitHub Desktop.
Save veltman/a60ea5bb84b8cae8160511789be6e492 to your computer and use it in GitHub Desktop.
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