<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Creeper animation</title>
</head>
<body>
<div id="creeper">
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/face.png?raw=true" class="side front" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side back" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side top" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side bottom" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side left" />
    <img src="https://github.com/Mcdostone/mcdostone.github.io/blob/master/side.png?raw=true" class="side right" />
</div>

</body>
</html>
:root {
    --size-creeper: 128px;
}

body {
    display: flex;
    height: 100vh;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#creeper {
    width: var(--size-creeper);
    height: var(--size-creeper);
    transform-style: preserve-3d;
    animation: rotate 2s ease-in-out infinite alternate;
}

.side {
    position: absolute;
    width: var(--size-creeper);
    height: var(--size-creeper);
}

.front  { transform:                  translateZ(calc(var(--size-creeper) / 2)); }
.top    { transform: rotateX( 90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.right  { transform: rotateY( 90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.left   { transform: rotateY(-90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.bottom { transform: rotateX(-90deg)  translateZ(calc(var(--size-creeper) / 2)); }
.back   { transform: rotateX(-180deg)  translateZ(calc(var(--size-creeper) / 2)); }

@keyframes rotate {
  50% { transform: rotateY(90deg) rotateX(90deg) scale3d(.5, .5, .5) }
  100% { transform: rotateY(180deg) rotateX(180deg) }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.