카드 회전 전환 효과를 달성하기 위한 js 및 CSS3

이 글에서는 카드 회전 전환 효과를 구현하기 위한 js CSS3를 주로 소개합니다. 관심 있는 친구들이 참고할 수 있습니다.

게임에서 종종 볼 수 있는 전환 효과는 중간 카드입니다. 시선을 사로잡으세요. 다른 효과로 전환하려면 왼쪽이나 오른쪽으로 스와이프하세요. 오늘은 이 효과를 얻기 위해 CSS3를 사용해 보겠습니다.

먼저 데모를 살펴보겠습니다. 특정 스타일을 직접 조정할 수 있습니다.

(PC에서는 버튼을 클릭하여 전환할 수 있고 휴대폰에서는 왼쪽 및 오른쪽으로 슬라이드할 수 있습니다)

이 효과에서 알 수 있듯이 5개의 p는 왼쪽과 오른쪽으로 전환될 수 있으며 전환할 때마다 항상 중앙의 눈에 띄는 위치에 표시됩니다. 전환시 p가 이동되고 DOM 추가 및 삭제가 이루어진 것으로 보입니다. 하지만 요소를 살펴보면 DOM 요소의 위치가 변경되지 않고 여전히 해당 위치에 있음을 알 수 있습니다. 각 요소의 클래스를 전환했기 때문에 페이지의 위치가 변경된 것 같습니다.

실제로 DOM을 추가하거나 삭제하지 않고 위치의 각 p에 대해 특정 스타일을 작성하고 각 p에 대해 절대 위치 지정을 수행한 다음 스타일을 회전시키는 것이 원칙입니다. 각 스위치에는 0.6초의 전환 프로세스가 있습니다.

-webkit-transition: all 0.6s;
transition: all 0.6s;

예를 들어 클래스는 왼쪽에서 오른쪽으로: item_0, item_1, item_cur, item_3, item_4입니다. 왼쪽으로 갈수록 오른쪽의 p가 가운데로 전환되어 클래스는 왼쪽에서 오른쪽으로 item_1, item_cur, item_3, item_4, item_0이 됩니다.

var egg_change = function(type){
 var $demo = $('.demo'),
  index = parseInt( $demo.attr('index_cur')||2 ),
  $item = $('.demo .item'),
  len = $item.length;

 if( type=='left' ){
  index = (index+1)%len;
 }else{
  index = (index-1+len)%len;
 }
 $demo.attr('index_cur', index);

 $item.removeClass('item_0 item_1 item_3 item_4 item_cur');
 
 $item.eq( (index-2+len)%len ).addClass('item_0');
 $item.eq( (index-1+len)%len ).addClass('item_1');
 $item.eq(index).addClass('item_cur');
 $item.eq( (index+1)%len ).addClass('item_3');
 $item.eq( (index+2)%len ).addClass('item_4');
}

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

JavaScript는 브라우저가 CSS3 속성을 지원하는지 어떻게 결정합니까?

js 및 css3을 사용하여 회전 효과를 구현합니다.

jQuery 및 CSS3 접이식 카드 드롭다운 목록 상자를 사용하여 회전 효과를 구현합니다. 효과

위 내용은 카드 회전 전환 효과를 달성하기 위한 js 및 CSS3의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!