CSS 속성은 모든 갤러리 이미지

Question

HTML

<div class="photos"> 
<img src="images/p1.jpg" /> 
<img src="images/p2.jpg" /> 
............. 
</div> 

CSS 이유는 위의 CSS는 속성이 p1.jpg에만 적용 회전되는

.photos img:hover { 
    -webkit-transform: rotate(360deg) scale(1.5); 
    -moz-transform: rotate(360deg) scale(1.5); 
    -o-transform: rotate(360deg) scale(1.5); 
    transform: rotate(360deg) scale(1.5); 
    z-index: 10;} 

적용되지 않습니다 회전?

Answer 1

p1.jpg에만 마우스를 올려 놓기 때문에 CSS 선택기는 당신이 떠오르게하는 이미지에서만 해고됩니다.

각 이미지를 개별적으로 회전시키지 않으려면이 줄을 CSS에 추가하십시오.

-webkit-transition: all 1.2s linear; 
-moz-transition: all 1.2s linear; 
-o-transition: all 1.2s linear; 
-ms-transition: all 1.2s linear; 
transition: all 1.2s linear; 

불행히도, 여러분이 궁금한 점은 JavaScript가 필요합니다.

Answer 2

this link는

.elem{ 
    -webkit-transition-property: -webkit-transform; 
    -webkit-transition-duration: 1s; 

    -moz-transition-property: -moz-transform; 
    -moz-transition-duration: 1s; 
} 
.elem:hover { 
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 

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

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

Answer 3

회전 작동 .. 당신을 도울 수 있습니다. 360 도의 각도는 이미지를 동일한 위치로 가져옵니다. 전환과 함께 변환을 사용하거나 각도 값을 변경하십시오. 코드와 아무 문제가 없었다

.photos img { 
    -webkit-transition: -webkit-transform 1.2s linear; 
    -moz-transition: -moz-transform 1.2s linear; 
    -o-transition: -o-transform 1.2s linear; 
    -ms-transition: -ms-transform 1.2s linear; 
    transition: transform 1.2s linear; 
    overflow:hidden; 
} 

.photos img:hover { 
    -webkit-transform: rotate(360deg) scale(1.5); 
    -moz-transform: rotate(360deg) scale(1.5); 
    -o-transform: rotate(360deg) scale(1.5); 
    -ms-transform: rotate(360deg) scale(1.5); 
    transform: rotate(360deg) scale(1.5); 
    z-index: 10; 
} 

Answer 4

: 뭔가처럼

그래서, 당신의 코드가 될 것입니다. 회전은 div의 모든 요소에서 작동했습니다. '변형'의 경우 delay or duration이 없기 때문에 볼 수없는 유일한 이유입니다.

'Dragos Sandu'와 동일한 코드를 사용했습니다. 내가 제안하는 변경 사항은 "ease-in-out"입니다. 특별히 1.2 초 밖에 걸리지 않습니다. 이렇게하면 "눈이 편하게" "변경됩니다. CSS

.photos img:hover { 
    transform: rotate(360deg) scale(1.5); 
    -webkit-transform: rotate(360deg) scale(1.5); 
    -moz-transform: rotate(360deg) scale(1.5); 
    -o-transform: rotate(360deg) scale(1.5); 
    z-index: 10; 
    -webkit-transition: all 1.2s ease-in-out; 
    -moz-transition: all 1.2s ease-in-out; 
    -o-transition: all 1.2s ease-in-out; 
    -ms-transition: all 1.2s ease-in-out; 
} 

Working Demo