css3卡片翻转抽奖

1. 实现思路

将两个元素放到同一个容器中，然后分别对两个元素添加旋转动画，利用css3属性backface-visibility：将元素翻转到背面时，元素不可见。

卡片正面

卡片背面，即奖品面

2. 代码实现

CSS

.container {
    position: relative;    
    width: 100px;
}

img {
    width: 100px;
}

.front, .back {
    position: absolute;
    left: 0;
    top: 0;
    backface-visibility: hidden;
}
.front {
    transform: rotateY(0deg);
}
.back {
    transform: rotateY(-180deg)
}

.toback {
    transform: rotateY(180deg);
}

.tofront {
    transform: rotateY(0deg);
}

.front,
.back {
    transition: all 1s;
}

JS

$(function() {
  $( ".container" ).on('click', function () {
    $( ".front" ).addClass('toback');
     $( ".back" ).addClass('tofront');
  })
});

demo地址

3. 其他
   业务中，有4张卡片，任意抽中一个，根据后端返回的中奖结果进行展示，因此需要将已中奖元素放置到用户点击的卡片位置。
   如：
   用户点击了第四张图

   
   
   

   抽奖区

后端返回了以下数据，其中中奖的数据在第二个位置

[
{
  name: '一等奖',
  isLucky: false,
},
{
  name: '普通奖',
  isLucky: true,
},
{
  name: '二等奖',
  isLucky: false,
},
{
  name: '三等奖',
  isLucky: false,
},
]

这里就要让
数组元素位置互换：将中奖元素切换到点击的位置

splice对数组元素进行添加/删除，返回被删除的元素。

arr.splice(index,howmany,item1,.....,itemX)

其中index是操作数组元素的开始位置,howmany是删除元素的数目,item1,.....,itemX是添加的元素。

swapItem = (arr, fromIndex, toIndex) => {
  arr[toIndex] = arr.splice(fromIndex, 1, arr[toIndex])[0];
  return arr;
};