cube with drag (1)

<!DOCTYPE html><html>
<head>
<script src="https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b"></script>

<style>

* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-family:Lovely Valentine;
background-size: cover;
}
body {
position: fixed;
background: inherit;
height: 100vh;
width: 1080px;
min-height: 100%;
width: 100%;
overflow: hidden;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
}
.viewport {
position: relative;
perspective: 1000px;
perspective-origin: 50% 250px;
transform: scale(0.8, 0.8);

}
.cube {
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: relative;
height: 250px;
width: 250px;
transform-style: preserve-3d;
transform: rotateX(136deg) rotateY(1122deg);
}
.cube>div {
overflow: hidden;
position: absolute;
opacity: 1;
height: 250px;
width: 250px;
border: 1px solid black;
touch-callout: none;
user-select: none;
background-color:rgba(255,255,255,0.85);
}
.cube>div>div.cube-image {
width: 250px;
height: 250px;
transform: rotate(180deg);
line-height: 250px;
font-size: 80px;
text-align: center;
color: #000;

}
.cube>div>div.cube-image.active {

}
.cube>div:hover {
cursor: pointer;
}
.cube>div:active {
cursor: pointer;
}
.cube>div:first-child {
transform: rotateX(90deg) translateZ(125px);
outline: 1px solid transparent;
}
.cube>div:nth-child(2) {
transform: translateZ(125px);
outline: 1px solid transparent;
}
.cube>div:nth-child(3) {
transform: rotateY(90deg) translateZ(125px);
outline: 1px solid transparent;
}
.cube>div:nth-child(4) {
transform: rotateY(180deg) translateZ(125px);
outline: 1px solid transparent;
}
.cube>div:nth-child(5) {
transform: rotateY(-90deg) translateZ(125px);
outline: 1px solid transparent;
}
.cube>div:nth-child(6) {
/* background: URL(""); */
background-repeat: no-repeat;
background-size: 100% auto;
transform: rotateX(-90deg) rotate(180deg) translateZ(125px);
outline: 1px solid transparent;
}
object {
opacity: 0.5;
}
object:hover {
opacity: 1;
}
@media (max-width: 640px) {
.viewport {
transform: scale(0.6, 0.6);
}
}
.threed {
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 6em;
position: absolute;
z-index: 5;
perspective: 1000px;
transform-style: preserve-3d;
}
.circle-me {
font-size: 1em;
letter-spacing: 0.1em;
color: #fff;
opacity: 85%;
text-shadow: 0 0 0.125em #FF007A;
-webkit-text-stroke: 1px #000;
position: relative;
font-size: calc( 1080px / var(--char-total));
width: 65%;
padding: 0.625em;
height: 0px;
margin: auto;
transform-style: preserve-3d;
animation: spin 6s linear infinite;
--speed: calc( 0.6s * var(--char-total));
animation-duration: var(--speed);
}
.char {
position: absolute;
top: 50%;
left: 50%;
line-height: 1;
text-align: center;
width: 1em;
margin-top: -0.5em;
margin-left: -0.5em;
transform-style: preserve-3d;
transform-origin: center;
transform: rotateY(calc(var(--char-index) * 12deg)) translateZ(125px);
}
@keyframes spin {
0% {
transform: rotateY( 180deg) rotateX( 20deg) rotateY( 360deg);
}
100% {
transform: rotateY( 180deg) rotateX( 20deg) rotateY( 0deg);
}
}
</style>
<html>
<head>
<title></title>
</head>
<body>
<div class="viewport">
<div class="cube">
<div class="side">
<div class="cube-image">
bottom
</div>
</div>
<div class="side">
<div class="cube-image">
right
</div>
</div>
<div class="side">
<div class="cube-image">
front
</div>
</div>
<div class="side">
<div class="cube-image">
left
</div>
</div>
<div class="side">
<div class="cube-image">
back
</div>
</div>
<div class="side">
<div class="cube-image active">
top
</div>
</div>
</div>
</div>
</body></html>