<div class="container">
  <div id="planet1" class="planet">
    <img src="https://images.vexels.com/media/users/3/152536/isolated/preview/401b51c3a9098f12b566121c92009877-mars-planet-icon-by-vexels.png">
    <h3>MARS</h3>
  </div>
  <div id="planet2" class="planet">
    <img src="https://images.vexels.com/media/users/3/152680/isolated/preview/22e162e0d0066ad0881e1ee797574680-uranus-planet-icon-by-vexels.png">
    <h3>URANUS</h3>
  </div>
  <div id="planet3" class="planet">
    <img src="https://images.vexels.com/media/users/3/152509/isolated/preview/e058e7f53d319e0628763c70ab7dce14-jupiter-planet-icon-by-vexels.png">
    <h3>JUPITER</h3>
  </div>
</div>
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');

*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: #01010f;
}

.container {
  width: 70vw;
  max-width: 300px;
  text-align: center;
  top: 50%;
  left: 50%;
  height: 100vh;
  position: relative;
  perspective: 1000px;
  transform: translate3d(-50%,-50%,600px);
  /* ^^^ 600px for safari hack */
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
}

img {
  max-width: 100%;
  max-height: 100%;
  cursor: pointer;
}

h3 {
  color: #fbdcb9;
  font-family: 'Titillium Web', sans-serif;
  letter-spacing: 2px;
}

.planet {
    margin: auto;
    width: 100%;
    position: absolute;
    cursor: pointer; 
}
$(".planet").click(function() {
   $('.container').attr("planet-center", this.id);
   if (this.id == "planet1") centerPlanet1();
   if (this.id == "planet2") centerPlanet2();
   if (this.id == "planet3") centerPlanet3();

});


function centerPlanet1() { 
   var tl = new TimelineMax()
   .to('#planet1', 1, {xPercent: 0, z: 1}, 0)
   .to('#planet2', 1, {xPercent: 140, z: -800}, 0)
   .to('#planet3', 1, {xPercent: -140, z: -800}, 0)
   
}

function centerPlanet2() {
   var tl = new TimelineMax()
   .to('#planet1', 1, {xPercent: -140, z: -800}, 0)
   .to('#planet2', 1, {xPercent: 0, z: 1}, 0)
   .to('#planet3', 1, {xPercent: 140, z: -800}, 0);
}

function centerPlanet3() {
   var tl = new TimelineMax()
   .to('#planet1', 1, {xPercent: 140, z: -800}, 0)
   .to('#planet2', 1, {xPercent: -140, z: -800}, 0)
   .to('#planet3', 1, {xPercent: 0, z: 1}, 0);
}


$(function() {
  centerPlanet2();
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js