js and CSS3 to achieve card rotation switching effect

This article mainly introduces js CSS3 to achieve card rotation switching effect in detail. It has a certain reference value. Interested friends can refer to it

We often see it in the game Some cards have the effect of switching left and right. The middle one is the most eye-catching. Swipe left or right to switch to another one. Today we will use CSS3 to achieve this effect.

Let’s take a look at a demo first. You can adjust the specific style yourself:

(You can click the button to switch on PC, and on mobile Swipe left and right to switch)

From the effect, we can see that these 5 ps can be switched left and right. Each time you switch, there will always be one displayed in a conspicuous position in the middle. When switching, it seems that p has been moved and DOM additions and deletions have been performed. But if you examine the elements, you can see that the DOM element has not changed its position, it is still in that position. We just switched the class on each element, so the position on the page seems to have changed.

In fact, the principle is this: without adding or deleting DOM, write a specific style for each p in the position, perform absolute positioning for each p, and then rotate the styles. Each switch has a 0.6s transition process:

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

For example, the classes from left to right are: item_0, item_1, item_cur, item_3 , item_4, each class is the position of the current p. When sliding to the left, the p on the right will switch to the middle, so that the class becomes item_1, item_cur, item_3, item_4, item_0 from left to right.

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');
}

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How does JavaScript determine whether the browser supports CSS3 attributes

js and css3 to achieve rotation effects

jQuery and CSS3 folding card drop-down list box to achieve the effect

The above is the detailed content of js and CSS3 to achieve card rotation switching effect. For more information, please follow other related articles on the PHP Chinese website!