No replies
Bluenose
Bluenose's picture
Offline
Enthusiast
Last seen: 4 weeks 3 days ago
Timezone: GMT+1
Joined: 2011-10-11
Posts: 96
Points: 136

Hello

I have a test 'Send' button page here: http://www.dimadayoub.net/mail/flipButton.html

The icon only flips half-way and ends up upside down after the contact form is sent which tends to imply that the form has not been correctly sent - it should really end up back where it started.

Do I just need to change the rotate values towards the end of the CSS here to make the mail icon go full circle?

#gridWrapper{
 
	margin-top: 500px;
	margin-left:130px;	
	height: 100px;
	width: 100px;
 }
 
a:link{
  color:#0095DD; /*blue colour*/
}
.flipBtnWrapper{
  width: 40%;
  height: 40%;
  position: relative;
  float: left;
  margin: 6% 4%;
}
.flipBtn, .flipBtn_checkbox, .flipBtn_face{
  position: absolute;
  width: 100%;
  height: 100%;
}
.flipBtn {    
  transition: transform 2s;  
  transform-style: preserve-3d;  
  pointer-events: none;
  box-shadow: 0px 0px 4px #C7C7C7; /*this is grey*/
  }
.flipBtnWrapper:hover >  .flipBtn{
   box-shadow: 0px 0px 4px #828282; /*this is dark grey*/
}
.flipBtn_back{  
  transform:  translateZ( -10px );
}
.flipBtn_front{
  transform: translateZ( 10px );
  backface-visibility: hidden;
}
.flipBtn_back, .flipBtn_front{
  background-repeat: no-repeat;
  background-position: center;
}
.flipBtn_checkbox{
  opacity: 0;
  cursor: pointer;
}
 
.flipBtn_front.demo1{
	background-image: url("image/mail-icon1.png"); /*Salmon pink and Salmon orange*/
}
.flipBtn_back.demo1{
	background-image:  url("image/mail-icon1.png"); /*Salmon pink and Salmon orange*/
}
.flipBtn_mid.demo1{
  height: 20px;  
  transform: rotateX(90deg);
  top: -10px;
}
.flipBtn_checkbox:checked + .flipBtn.demo1{
  transform: rotateX( -180deg );
}

Thanks again.