비 CSS3 브라우저에서 호버 및 배경 변경시 CSS3 플립 애니메이션

CSS3 브라우저 및 비 CSS3 브라우저에서 호버 위에 내 GIF 이미지를 애니메이트 (뒤집기)하기 만하면 배경색이 변경됩니다.비 CSS3 브라우저에서 호버 및 배경 변경시 CSS3 플립 애니메이션

나 코드를 사용 CSS3 플립 애니메이션을 달성 할 수

.imageselector:hover { 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 1; 
    -webkit-animation-timing-function: linear; 

    -moz-animation-name: rotate; 
    -moz-animation-duration: 2s; 
    -moz-animation-iteration-count: 1; 
    -moz-animation-timing-function: linear; 
} 
@-webkit-keyframes rotate { 
    from {-webkit-transform: rotateX(0deg);} 
    to {-webkit-transform: rotateX(360deg);} 
} 

@-moz-keyframes rotate { 
    from {-moz-transform: rotateX(0deg);} 
    to {-moz-transform: rotateX(360deg);} 
}

및

.imageselector:hover { background:#FFF999; }

제가 그 CSS3 브라우저를 지원하는 단지 비 CSS3로 움직이면서 있도록 둘을 결합 할 이용한 배경 변경 브라우저에서는 배경색 만 변경해야합니다.

출처

2013-09-03 agaggi

당신이 올바르게하고 싶은 것을 이해했다면, 어떻게 접근 할 것인가? 호버가 작동하면 배경색을 바꿀 컨테이너 div에 이미지를 넣으십시오.

<div class="container"> 
     <img src="http://1.bp.blogspot.com/-Gv648iUY5p0/UD8rqW3deSI/AAAAAAAAACA/MrG4KxFyM5A/s72-c/Fish.jpeg" /> 
    </div>

그런 다음 CSS3 애니메이션을 이미지에 적용하십시오.

* {margin:0; padding:0;} 
    .container {width:100px; height:100px; background:#cde; margin:20px;} 
    .container img {padding:14px; display:block; -webkit-transition:all 2s ease;} 
    .container:hover {background:#abc;} 
    .container:hover img {-webkit-transform:rotateX(180deg);}

지원하는 브라우저는 움직입니다. 나머지는 배경을 바꿀 것입니다. 다음은 간단한 예입니다. http://jsfiddle.net/xfnHr/

출처

2013-09-03 14:10:10

CSS3 브라우저에서 이미지를 애니메이션 처리하고 비 CSS3 지원 브라우저에서 배경색을 변경하여 투명 이미지에 호버 효과를 표시하려고합니다 (CSS3 지원 브라우저에서는 배경색을 변경하면 안 됨). – agaggi

순수한 CSS로 어떻게하는지 모르겠습니다. 배경을 처리 할 jQuery를 추가했습니다. http://jsfiddle.net/xfnHr/1/ –

비 CSS3 브라우저에서 호버 및 배경 변경시 CSS3 플립 애니메이션

답변

관련 문제