SOURCE

<div>
  <section class='galeria'>
    <input type="radio" id="uno" value="1" name="tractor" checked='checked' />    
    <input type="radio" id="dole" value="2" name="tractor" />     
    <input type="radio" id="tele" value="3" name="tractor" />

    <article class='card una'>
      1
      <label for='dole' class='entypo-left-bold otra'></label>
      <label for='tele' class='entypo-right-bold otra'></label>
      <label for='uno' class='entypo-arrows-ccw afin'></label>  
    </article>

    <article class='card dos'>
      2
      <label for='tele' class='entypo-left-bold otra'></label>
      <label for='uno' class='entypo-right-bold otra'></label>
      <label for='dole' class='entypo-arrows-ccw afin'></label>  
    </article>

    <article class='card tres'>
      3
      <label for='uno' class='entypo-left-bold otra'></label>
      <label for='dole' class='entypo-right-bold otra'></label>
      <label for='tele' class='entypo-arrows-ccw afin'></label>  
    </article>
  </section>
</div>

/* uno -1 dole-2 tele-3
l r a
2 3 1
3 1 2
1 2 3
*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700|Great+Vibes);
@import url(http://weloveiconfonts.com/api/?family=entypo);
*, *:after, *:before {
  box-sizing: border-box;
}
* {
  margin:0;
  padding:0;
  border: 0 none;
  position: relative;
}
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif; 
  display: inline-block; 
  margin-right: .5rem;
}
html, body  {
  background: #004050;
  width: 100%;
  height: 100%;
}
body {
  display: flex;
}
body > div {
  margin: auto;
}
.galeria {
  margin: 2vh auto 0;
  width: 80vw;
  transform-style: preserve-3d;
}
.galeria:before {
  content: '';
  padding-top: 56.25%;   /* 背景图片预留空间 */
  display: inline-block;
  width: 0;
}
.card {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  font-family: 'Great Vibes';
  font-size: 30px;
  color: #fff;
  background-size: 2px 2px, cover;
  background-repeat: repeat, none;
  background-position: 0 0;
  box-shadow: 0 0 2rem rgba(0,0,0,.5);
  border-radius: 3px;
}
.una {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAAEFsT2yAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFElEQVR4nGNhYGBwYIET////ZwAAETIDym2lzEcAAAAASUVORK5CYII=), url(https://2.bp.blogspot.com/-Kd55Z83gyvM/UpD8A6qj6CI/AAAAAAAAH20/eV8YvYCDAvE/s1600/mult-lab1.jpg);
}
.dos {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAAEFsT2yAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFElEQVR4nGNhYGBwYIET////ZwAAETIDym2lzEcAAAAASUVORK5CYII=), url(https://2.bp.blogspot.com/-ggbrdAifJsg/UpD8BKbE3qI/AAAAAAAAH24/qJ4tw_dWvZw/s1600/mult-lab2.jpg);
}
.tres {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAAEFsT2yAAAACXBIWXMAAAsSAAALEgHS3X78AAAAFElEQVR4nGNhYGBwYIET////ZwAAETIDym2lzEcAAAAASUVORK5CYII=), url(https://4.bp.blogspot.com/-OGSy0-ttar0/UpD8CJxQtjI/AAAAAAAAH3E/b2k5041nSAE/s1600/mult-lab3.jpg);
}
input {
  visibility: hidden;
}
label {
  position: absolute;   /* 当一个元素设置为绝对定位时，后面的元素会补充它的位置。 */
  top: 0; 
  bottom: 0;
  width: 4vw;
  height: 15vh;
  line-height: 15vh; 
  margin: auto 0;
  background: #15BFCC;
  color: #fff;
  font-size: 4vw;
  text-align: right;
  padding: 0 .5vw;
  cursor: pointer;
  opacity: .2;
  transition: .5s linear;
}
.otra + .otra,
#uno:checked ~ .tres .afin,
#dole:checked ~ .una .afin,
#tele:checked ~ .dos .afin{
  right: 0;
  text-align: left;
}
#uno:checked ~ .una .otra,
#dole:checked ~ .dos .otra,
#tele:checked ~ .tres .otra {
  background:  #0D757D;
  display: block;
}
#uno:checked ~ .una .afin,
#dole:checked ~ .dos .afin,
#tele:checked ~ .tres .afin,
:not(:checked) ~ .otra {
  display: none;
}
.card:hover label {
  animation: pulso 1s infinite alternate;
}
.card:hover label + label {
  animation-delay: .5s;
}
.card:hover label:hover {
  animation: none;
  opacity: .8;
  width: 10vw;
  font-size: 8vw;
}
#uno:checked ~ .dos,
#dole:checked ~ .tres,
#tele:checked ~ .una {
  animation: 1s fuera-izq;
  animation-fill-mode: forwards;
  transform-origin: center left;
  z-index: 2;
}
#uno:checked ~ .tres,
#dole:checked ~ .una,
#tele:checked ~ .dos {
  animation: 1.5s fuera-dch;
  animation-fill-mode: forwards;
  transform-origin: center right;
  z-index: 2;
}  
#uno:checked ~ .una,
#dole:checked ~ .dos,
#tele:checked ~ .tres {
  animation: 2s central;
  animation-fill-mode: forwards;
  transform-origin: center center;
  z-index:3;
}
@keyframes fuera-izq {
  0% {transform: scale(1) translatex(0%);} 
  70% {transform: scale(.9) translatex(-100%);}
  100% {transform: scale(.9) translatex(-7%);}
}
@keyframes fuera-dch {
  0% {transform: scale(1) translatex(0%);}
  70% {transform: scale(.9) translatex(100%);}
  100% {transform: scale(.9) translatex(7%);}
}
@keyframes central {
  0% {transform: scale(.8);z-index: 1;}
  80% {transform: scale(.5);z-index: 3;}
  100% {transform: scale(1);z-index: 3;}
}
@keyframes pulso {
  50% {opacity: .7;}
}