<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
This Pen doesn't use any external CSS resources.