خرید بک لینک

درباره سایت

CodingForums

آخرین مطالب

امکانات وب

Flipping an icon correctly

Hello

I have a mail icon on this page:

3D Button Flip

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 completely 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 );
}
According to this tutorial, https://www.w3schools.com/css/css3_animations.asp

if the animation-duration property is not specified, no animation will occur. The code specified above does not specify animation-property. Is that why the icon does not flip completely?

Thanks

برچسب: نویسنده: آیلین رضوانی تاريخ: چهارشنبه 27 دی 1396 ساعت: 5:09

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه