<!DOCTYPE html>
<html>

<head>
  <title>Exercise</title>
  <link href="exercise.css" rel="stylesheet" />
</head>

<body>
  <div class="threeDeeContainer">Tumble
    <div id="loading">loading
    </div>
  </div>
  <div class="threeDeeContainer">Orbit
    <div id="orbiting">loading
    </div>
  </div>
</body>

</html>
.wrapper {
    height: 50px;
    width: 200px;
    border: 1px solid red;
    background-color: grey;
}



@-webkit-keyframes tumble-animation {
    from {
        transform: rotateX(0) rotateY(0) rotateZ(0);
        animation-timing-function: linear;
    }

    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        animation-timing-function: linear;
    }
}

@-webkit-keyframes orbit-animation {
    from {
        -webkit-transform: rotateY(0) translateZ(100px);
        -webkit-animation-timing-function: linear;
    }

    to {
        -webkit-transform: rotateY(360deg) translateZ(100px);
        -webkit-animation-timing-function: linear;
    }
}
@keyframes tumble-animation {
    from {
        transform: rotateX(0) rotateY(0) rotateZ(0);
        animation-timing-function: linear;
    }

    to {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
        animation-timing-function: linear;
    }
}

@keyframes orbit-animation {
    from {
        transform: rotateY(0) translateZ(100px);
        animation-timing-function: linear;
    }

    to {
        transform: rotateY(360deg) translateZ(100px);
        animation-timing-function: linear;
    }
}

.threeDeeContainer {
    perspective: 600px;
    -webkit-perspective: 600px;
    text-align: center;
    background-color: lightgrey;
    position: relative;
    margin: 10px;
}

#loading {
    margin: 0 auto;
    text-align: left;
    text-align: center;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background-color: orange;
    -webkit-animation-name: tumble-animation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-name: tumble-animation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}

#orbiting {
    margin: 0 auto;
    text-align: left;
    text-align: center;
    width: 100px;
    height: 100px;
    border: 1px solid red;
    background-color: orange;
    -webkit-animation-name: orbit-animation;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    animation-name: orbit-animation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
}