WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > Flip button in CSS

Reply
  Thread Tools Display Modes
Old 21st December 17, 04:06 AM   #1
Blueie
WLC Member
 
Join Date: Mar 2013
Posts: 36
Default Flip button in CSS

Hello

I have a mail icon on this page:

http://www.dimadayoub.net/mail/flipButton.html

When it is clicked, it flips only halfway and looks as if the contact form, which the mail icon will be attached to, hasn't been sent.

The icon should flip full circle and appear as the original does before it is clicked.

How can I achieve that, please?

This is the CSS for the page:

Code:
#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;  
	/*background-color: #d5485a;*/
  transform: rotateX(90deg);
  top: -10px;
}
.flipBtn_checkbox:checked + .flipBtn.demo1{
  transform: rotateX( -180deg );
}
Thanks for any advice.
Blueie is offline   Reply With Quote
Old 3rd January 18, 03:59 AM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: Flip button in CSS

Look into CSS animations: https://www.w3schools.com/css/css3_animations.asp
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 16th January 18, 07:27 PM   #3
Blueie
WLC Member
 
Join Date: Mar 2013
Posts: 36
Default Re: Flip button in CSS

Many thanks, Meesa
Blueie is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 05:49 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.