我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

新年玩卡片游戏抽奖的时候大家肯定希望抽到最稀有的卡片，但是一般卡片抽到好的卡片的概率是非常小的，今天我们通过css来制作一个100%中奖的卡片抽取效果。

屏幕中间有三个鸿运卡片，点击按钮随机就会随机旋转到任意一个鸿运卡片到屏幕中间。

实现

该效果分为两部分卡片布局与按钮事件，为了让旋转更加立体我们利用css中3d转换实现卡片布局。

• 卡片布局。首先我们画一个div用来装这些卡片，重点设置transform-style: preserve-3d,preserve-3d属性值让父元素变成3维空间，子元素设置的3d转换效果才能显示出来。然后将卡片放进去以y轴进行旋转，同时必须在z轴上进行位移，不然卡片会重叠到一起。这里卡片我们就用自己喜欢的图片，利用box-shadow让图片周边形成金色阴影，让图片看起来更像卡片。

    .container {
        width: 200px;
        height: 300px;
        position: absolute;
        left: 45%;
        top: 30%;
        transform-style: preserve-3d;
        transition: all 0.5s;
      }
      .container img {
        width: 100%;
        height: 100%;
        position: absolute;
        box-shadow: 0 5px 50px gold;
        cursor: pointer;
        border-radius: 10px;
      }
        .one {
        transform: rotateY(0deg) translateZ(200px);
      }
      .two {
        transform: rotateY(120deg) translateZ(200px);
      }
      .three {
        transform: rotateY(240deg) translateZ(200px);
      }

     <div class="container">
        <img class="one" src="./image/1.jpg" alt="" />
        <img class="two" src="./image/2.jpg" alt="" />
        <img class="three" src="./image/3.jpg" alt="" />
      </div>

• 点击选择。我们在卡片下面画出一个按钮，还得添加box-shadow属性让div有立体感，当点击按钮时，让容器旋转几个图片旋转的角度，利用Math.random()得到随机角度数。

   .button {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        border: 2px solid red;
        background: red;
        position: fixed;
        bottom: 50px;
        left: 50%;
        color: white;
        font-size: 20px;
        cursor: pointer;
        text-align: center;
        line-height: 100px;
        box-shadow: 0 10px 20px red;
      }

   let i = 1;
      $('.button').click(function () {
        i += Math.floor(Math.random() * 2 + 1);
        $('.container').css('transform', 'rotateY(' + 120 * i + 'deg)');
      });

点击事件是通过jq实现的，所以我们要记得引入jq文件。

总结

这样我们就能抽取我们幸运卡片了，在制作过程中我们要注意将父元素设置为preserve-3d。