网站首页 > 技术文章正文

一种简单的CSS翻牌效果实现方式（一种简单的css翻牌效果实现方式有哪些）

nanyue 2024-10-30 02:57:50 技术文章 4 ℃

css翻牌效果在一些活动页面使用的还是比较多的，目前网上大部分的方案都是使用 backface-visibility? 等复杂且兼容性差的方案，本文介绍一种非常简单的方案。以扑克牌的翻转为例,如果事先准备好下面的两张图片

实现图片的翻转很简单,沿Y轴翻转180度的同时更换背景图片即可

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <style>
      #card {
        width: 470px;
        height: 640px;
        transition: 0.5s ease-in-out;
        /* 扑克牌背面 */
        background-image: url("front.png");
        background-size: cover;
      }
      #card.card-flip {
        transform: rotateY(180deg);
        /* 扑克牌正面 */
        background-image: url("back.png");
      }
    </style>
  </head>

  <body>
    <div id="card"></div>
    <script>
      const card = document.querySelector("#card");
      card.addEventListener("click", function () {
        this.classList.toggle("card-flip");
      });
    </script>
  </body>
</html>

但是直接翻转180度，数字面呈现的是牌7沿Y轴的镜像,如下图所示

解决这个问题有个简单的方案，我们准备图片的时候直接准备镜像后的图片，这样翻转后就能正常展示了

其实还有一种更简单的css处理方式,使用 ?scaleX(-1)? 同样能实现沿Y轴的镜像。

transform: rotateY(180deg) scaleX(-1);

效果如下

https://codesandbox.io/s/ecstatic-sanne-7w14c?file=/index.html

另外，如果图片加载速度慢，建议做预加载。

上一篇：用户被盗号了!为什么前端要被骂?（被盗号的前兆）
下一篇：加载动画「三点循环加载」（三点加载图片）

网站首页 > 技术文章 正文

一种简单的CSS翻牌效果实现方式（一种简单的css翻牌效果实现方式有哪些）

猜你喜欢

网站首页 > 技术文章正文