Spinner

by mrjordy

HTML

asdf
<div class=SpinnerBanner>
<div class="Wheel">
  <div class="SpokeContainer1">
    <div class="Spoke1">
      <div class="Bearing1" id="Select1">
      <div class="BearingText1">RFC</div>
      </div>
    </div>
  </div>
  <div class="SpokeContainer2">
    <div class="Spoke2">
      <div class="Bearing2" id="Select2">
      <div class="BearingText2">Change<br>Mgmt</div>
      </div>
    </div>
  </div>  
  <div class="SpokeContainer3" id="Select3">
    <div class="Spoke3">
      <div class="Bearing3">
      <div class="BearingText3">ECCB</div>
      </div>
    </div>
  </div>
</div>
<div class="Screen">
<div class="ScreenTriangle"></div>
<div class="ScreenTop">test</div>
<div class="Screen-BL-Diag"></div>
<div class="Screen-BR-Square"></div>
</div>
</div>
asdf

CSS

.SpinnerBanner {
  position: relative;
  height: 300px;
  width: 100%;
}
.Wheel {
    margin-left: 120px;
    margin-top: 120px;
    position: absolute;
    width: 100px;
    height: 120px;
    transform: rotate(0deg);
    transition: .5s;
}
.Bearing1, .Bearing2, .Bearing3 {
  width: 94px;
  height: 94px;
  margin-top: 3px;
  margin-left: 3px;
  border-radius: 50px;
  display: block;
  position: absolute;
  box-shadow: inset 0 0 50px rgba(255,255,255,.3);
  text-align: center;
  color: white;
  cursor: pointer;
}
.Bearing1 {
  background: #3F7ADE;
  transform: rotate(0deg);
  transition: .5s;
}
.Bearing2 {
  background: #FF2700;
  transform: rotate(-120deg);
  transition: .5s;
}
.Bearing3 {
  background: #76B858;
  transform: rotate(120deg);
  transition: .5s;
}
.BearingText1, .BearingText2, .BearingText3 {
  font-family: kalinga;
  line-height: 20px;
  font-size: 18px;
  font-weight: bold;
}
.BearingText1, .BearingText3 {
    padding-top: 38px;
}
.BearingText2 {
    padding-top: 31px;
}
.Spoke1, .Spoke2, .Spoke3 {
  display: block;
  background: #3F7ADE;
  width: 100px;
  height: 240px;
  border-top-right-radius: 50px;
  border-top-left-radius: 50px;
  margin-top: -120px;
  transition: .5s;
}
.SpokeContainer1, .SpokeContainer2, .SpokeContainer3 {
  position: absolute;
} 
.SpokeContainer2 {
  transform: rotate(120deg);
}
.SpokeContainer3 {
  transform: rotate(240deg);
}
.ScreenTop {
    border: 2px solid #3F7ADE;
    background: white;
    border-bottom: none !important;
    width: calc(100% - 250px);
    height: 144px;
    display: block;
    margin-left: 229px;
    position: absolute;
    border-top-right-radius: 4px;
    border-top-left-radius: 4px;
    z-index: 2;
}
.Screen-BL-Diag {
    display: block;
    width: 100px;
    height: 120px;
    border: 2px solid #3F7ADE;
    border-top: none !important;
    border-left: none !important;
    border-bottom: none !important;
    background: white;
    position: absolute;
    margin-left: 255px;
    margin-top:...

JavaScript

$('#Select1').click(function() {
     $('.Wheel').css({'transform' : 'rotate(0deg)'});
     $('.Bearing1').css({'transform' : 'rotate(0deg)'});
     $('.Bearing2').css({'transform' : 'rotate(-120deg)'});
     $('.Bearing3').css({'transform' : 'rotate(120deg)'});
     $('.Spoke1, .Spoke2, .Spoke3').css({'background' : '#3F7ADE'});
     $('.ScreenTop, .Screen-BL-Diag, .Screen-BR-Square, .ScreenTriangle').css({'border' : '2px solid #3F7ADE'});
});
$('#Select2').click(function() {
     $('.Wheel').css({'transform' : 'rotate(-120deg)'});
     $('.Bearing2').css({'transform' : 'rotate(0deg)'});
     $('.Bearing3').css({'transform' : 'rotate(240deg)'});
     $('.Bearing1').css({'transform' : 'rotate(120deg)'});
     $('.Spoke1, .Spoke2, .Spoke3').css({'background' : '#FF2700'});
     $('.ScreenTop, .Screen-BL-Diag, .Screen-BR-Square, .ScreenTriangle').css({'border' : '2px solid #FF2700'});
});
$('#Select3').click(function() {
     $('.Wheel').css({'transform' : 'rotate(120deg)'});
     $('.Bearing3').css({'transform' : 'rotate(0deg)'});
     $('.Bearing1').css({'transform' : 'rotate(-120deg)'});
     $('.Bearing2').css({'transform' : 'rotate(-240deg)'});
     $('.Spoke1, .Spoke2, .Spoke3').css({'background' : '#76B858'});
     $('.ScreenTop, .Screen-BL-Diag, .Screen-BR-Square, .ScreenTriangle').css({'border' : '2px solid #76B858'});
});