<figure>
<div class="toggle">
  <input id="a" type="checkbox" />
  <label for="a">
    <div class="card flip"></div>
    
  </label>
</div>
</figure>

<figure>
<div class="toggle">
  <input id="b" type="checkbox" />
  <label for="b">
    <div class="card grow"></div>    
  </label>
</div>
</figure>

<figure>
<div class="toggle slide">
  <input id="c" type="checkbox" />
  <label for="c">
    <div class="card slide"></div>    
  </label>
</div>
</figure>

<figure>
<div class="toggle slide2">
  <input id="d" type="checkbox" />
  <label for="d">
    <div class="card"></div>    
  </label>
</div>
</figure>

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

html {
  font:100%/1 "Montserrat";
}
html, body, figure { display:flex; }
html, body {
  justify-content:center;
  color:gray;
  height:100%;
}
body {
  text-align:center;
  counter-reset:count;
  background:gainsboro;
  width:80%;
}
figure {
  flex:1;
  flex-direction:column;
  justify-content:center;
  counter-increment:count;
}
figure:after {
  font-size:2rem;
  content:counter(count);
  opacity:.5;
}
.toggle {
  display:flex;
  position:relative;
  width:7.5rem;
  height:2.5rem; 
  background:white;
  align-self:center;
  user-select:none;
  margin:2rem;
}



  .toggle:after, .toggle:before {
  flex:1;
  text-align:center;
  line-height:2.5rem;
}
.toggle:after {
  content:"ON";
}
.toggle:before {
  content:"OFF";
}

input { display:none; }

label {
  position:absolute;
  top:0; left:0; right:0; bottom:0;
  perspective:1000; 
  cursor:pointer;
}

.card {
  position:relative;
  background:limegreen;
  transition:.4s;
  width:50%;
  height:2.5rem;
  pointer-events:none;
}

input:checked + label .card { background:tomato; }

.flip {
  transform:perspective(200) rotateY(0);  
  transform-origin:center right;
  transform-style:preserve-3d;
}

input:checked + label .flip {
  transform:perspective(200) rotateY(180deg);
}

.grow {
    animation:grow-rev .4s 1 both;
}

input:checked + label .grow {
  animation:grow .4s 1 both;
}
@keyframes grow {
  50%{ transform:translateX(1.875rem) scale(2) }
  to { transform:translateX(3.75rem); }
}

@keyframes grow-rev {
  from { transform:translateX(3.75rem); }
  50%{ transform:translateX(1.875rem) scale(2) }
  to { transform:translateX(0rem); }
}


.slide .card { transform:translate(0); }
.slide input:checked + label .card {
  transform:translateX(3.75rem);
}

.slide2 { overflow:hidden; }
.slide2 .card {
  transform:translate(0);
  background:transparent;
  box-shadow:
    -3.75rem 0 limegreen,
    3.75rem 0 tomato;
}
.slide2 input:checked + label .card {
  transform:translateX(3.75rem);
  background:transparent;
}