css3 3d transform box - Andrew Pougher

css3 3d transform box - Andrew Pougher

HTML

<div>

			<div class="boStartbtn" id="boStartbtn">
				<div class="boStartbtn-content">
					<div class="front">
                        Sell EUR<span>27</span>
                    </div>
                        <div class="back">   Buy EUR<span>39</span>  </div>
				</div>
			</div>
		
		</div>

CSS

.boStartbtn .boStartbtn-content {
			    -webkit-perspective: 6000px;
			    -moz-perspective: 6000px;
			    -ms-perspective: 6000px;
			    -o-perspective: 6000px;
			    perspective: 6000px;
			    width: 300px;
			    height: 400px;
			    position: relative;
          text-align:center;
			}
      .boStartbtn .boStartbtn-content div {
        padding-top:60px;
        color:white;
        //background-color:#ccc;
        font-family:arial;
        font-size:20px;
        backface-visibility: hidden;
      }
			.boStartbtn .boStartbtn-content .front {
			    position: absolute;
			    width: 300px;
			    height: 200px;
			    z-index: 2;
			    transition: all 2s ease-in-out;
			    transform-style: preserve-3d;
			    //transform-origin: 50% 50% -80px;
			    -webkit-box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    box-sizing: border-box;
         background-color:green;
			}
			.boStartbtn .boStartbtn-content .back {
			    position: absolute;
			    width: 300px;
			    height: 200px;
			    z-index: 1;
 			    transition: all 2s ease-in-out;
			    //transform-style: preserve-3d;
			    transform-origin: 50% 50% -80px;
			    transform: rotateX(180deg);
			    -webkit-box-sizing: border-box;
			    -moz-box-sizing: border-box;
			    box-sizing: border-box;
          background-color:green;
         
			}
			.boStartbtn-flipped .boStartbtn-content .front {
			    transition: all 2s ease-in-out;
          transform: rotateX(-180deg);
          background-color:#ccc;
			}
			.boStartbtn-flipped .boStartbtn-content .back {
			    transition: all 2s ease-in-out;
          -webkit-transform: rotateX(0deg);
			    -moz-transform: rotateX(0deg);
			    -o-transform: rotateX(0deg);
			    transform: rotateX(0deg);
			}
      .boStartbtn .boStartbtn-content span {
        
        display:block;
        
        font-size:300%;
        }
      }

JavaScript

$(".boStartbtn").click(function(){
$(this).toggleClass("boStartbtn-flipped");
});