css实现动态扑克牌反转

最新推荐文章于 2022-05-27 09:01:36 发布

l2028242163

最新推荐文章于 2022-05-27 09:01:36 发布

阅读量448

点赞数 1

文章标签： css html css3 html5

本文链接：https://blog.csdn.net/l2028242163/article/details/121048004

版权

HTML

<div class="tp">
      <input type="checkbox" name="a" id="box" />
      <label for="a">&lt<span>点这里</span></label>
      <div class="b"><img src="/imgs/9.jpeg" alt="" /></div>
      <div class="a"><img src="/imgs/A.jpeg" alt="" /></div>
      <div class="j"><img src="/imgs/J.jpeg" alt="" /></div>
      <div class="k"><img src="/imgs/K.jpeg" alt="" /></div>
    </div>

CSS

.tp {
        display: flex;
      }
      img {
        width: 200px;
        height: 350px;
        border: 2px solid;
        border-radius: 20px;
        overflow: hidden;
      }
      .b {
        position: relative;
        top: 200px;
        left: 700px;
        transition: all 2s;
      }
      .a {
        position: relative;
        top: 200px;
        left: 495px;
        transition: all 2s;
      }
      .j {
        position: relative;
        top: 200px;
        left: 290px;
        transition: all 2s;
      }
      .k {
        position: relative;
        top: 200px;
        left: 85px;
        transition: all 2s;
      }
      #box:checked ~ .k {
        transform: rotateZ(23deg) translateX(79px) translateY(8px);
      }
      #box:checked ~ .a {
        transform: rotateZ(-10deg) translateX(-15px) translateY(-11px);
      }
      #box:checked ~ .b {
        transform: rotateZ(-24deg) translateX(-50px) translateY(-35px);
      }
      #box:checked ~ .j {
        transform: rotateZ(7deg) translateX(32px) translateY(6px);
      }