Button Rotate3d na Hover

Question

Witajcie, zrobiłem przycisk obracający się o 180stopni.

Dałby ktoś rade mi powiedzieć, jak zrobić, aby on obrócił się dopiero po najechaniu na niego myszką?

kod: http://codepen.io/theviruspl/pen/ONwmvZ

Answer 1

  button {
        border-radius: 20px;
        width: 200px;
        text-align:center;
        padding:15px 0;
        border:10px solid green;
        background-color: gold;
        }

      button:hover {
        animation-name:szerokosc;
        animation-duration:4s;
        animation-iteration-count:infinite;
        animation-direction:alternate;
      }

 

Comments

Tylko pojawia się problem, Jeżeli trzymam myszkę cały czas to on się dalej obraca, a chodzi mi o to żeby obrócił się tylko raz. Ale i tak DZIĘKUJĘ.

---

Usuń

animation-iteration-count:infinite;

 

---

A, coś takiego, że jak odsunę myszkę, to żeby obrócił się z powrotem. Przepraszam za kłopot, chcę żeby to porządnie wyglądało.

---

 button {
        border-radius: 20px;
        width: 200px;
        text-align:center;
        padding:15px 0;
        border:10px solid green;
        background-color: gold;
        animation:szerokoscout 2s; 
        }
        button:hover {
              animation:szerokoscin 2s;
        }




      @keyframes szerokoscin
      {
         from {transform: rotateY(0deg); }
         to {transform: rotatey(180deg);}
      }

    @keyframes szerokoscout
      {
        from {transform: rotateY(180deg); }
         to {transform: rotatey(0deg);}
      }