html - 回転後の CSS を変更する Y

Question

divがホバーしているときにcssのrotateYの後に背景色を変更したい

@-webkit-keyframes spin {  
 0%{
    -webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;
 }  
 100%{
    -webkit-transform: rotateY(180deg); -webkit-transform-origin: 0% 0% 5;
 }  

}
.hex:hover{
  background:red;
   -webkit-animation-name: spin; 
   -webkit-animation-iteration-count: 1; 
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-duration: 1s; 
}

Answer 1

アニメーション キーフレーム自体の背景色を変更できるように、要素がホバー時にアニメーション化されるので、キーフレームでそれを定義する必要があります。これを試して：

 @-webkit-keyframes spin {  
 0%{
    -webkit-transform: rotateY(0deg); -webkit-transform-origin: 0% 0% 5;
 }  
 100%{
    -webkit-transform: rotateY(180deg); -webkit-transform-origin: 0% 0% 5;
       background:red;
 }  

}
.hex:hover{

   -webkit-animation-name: spin; 
   -webkit-animation-iteration-count: 1; 
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-duration: 1s; 
}
.hexHovered {
          background:red;
          }

ホバー時の背景色を保持するには、この JavaScript コードを使用できます。

$(".hex").hover(
function () { $(this).addClass(".hexHovered")
});​

Answer 2

animation-fill-mode を使用して、アニメーションを時間内に「持続」させることができます。回転ではなく色を持続させたいと仮定すると、もう少し複雑になります。1 つだけを永続化できるようにするには、2 つのアニメーションが必要です。

@-webkit-keyframes spin {  
 0% { -webkit-transform: rotateY(0deg);  }  
 100%{ -webkit-transform: rotateY(180deg);  }  
}
@-webkit-keyframes red {  
 0%   { background: white; }  
 100% { background: red; } 
}

.hex {
    -webkit-animation-fill-mode:  none, forwards;
   -webkit-animation-name: spin, red; 
   -webkit-animation-iteration-count: 0; 
   -webkit-animation-timing-function: ease-in-out;
   -webkit-animation-duration: 1s, 0.1s; 
   -webkit-animation-delay: 0s 1s;         
    -webkit-transform-origin: 0% 0% 5;
}
.hex:hover{
   -webkit-animation-iteration-count: 1; 
}

フィドル