网站侧边栏添加精美的可翻转显示模块代码（本站同款）

CSS 实现 hover 翻转显示区块（演示）

效果说明：鼠标悬浮卡片时，卡片进行 3D 翻转，切换展示正反面内容；点击卡片可跳转指定链接，适合放在网站侧边栏使用。

实现步骤

第一步：嵌入 HTML 代码

将下面 HTML 代码添加到你想要展示的位置，推荐放置在网站侧边栏，修改window.open('这里替换为你的目标网址')，实现点击跳转自定义网页。

<!-- 微信翻转卡片 -->
<div class="textwidget custom-html-widget"><div class="wx-card-widget" id="wx-card-wechat" onclick="window.open('https://zzyyi.com');">
    <div id="wx-flip-wrapper">
      <div id="wx-flip-content">
      <div class="wx-face"></div>
      <div class="wx-back wx-face"></div>
    </div></div></div></div>

<!-- 小程序翻转卡片 -->
<div class="textwidget custom-html-widget"><div class="xcx-card-widget" id="xcx-card-wechat" onclick="window.open('https://zzyyi.com');">
    <div id="xcx-flip-wrapper">
      <div id="xcx-flip-content">
      <div class="xcx-face"></div>
      <div class="xcx-back xcx-face"></div>
    </div></div></div></div>

第二步：引入 CSS 样式

把以下 CSS 样式复制粘贴到网站全局 CSS 文件内。

⚠️注意：后续需要修改样式内的图片地址，替换成你服务器上素材的真实 URL。

第三步：上传素材并配置图片路径

清除缓存、刷新页面，即可看到卡片翻转效果。

将配套图片素材上传至你的网站服务器；

修改 CSS 代码中所有url()内的图片地址，替换为服务器上图片的真实访问路径；

额外小提示

1. 可自行修改width、height调整卡片尺寸；
2. transition里的时间可以修改，控制翻转快慢；
3. 跳转链接修改 HTML 中window.open("链接地址")部分即可；
4. 若图片不显示，优先检查图片 URL 路径是否正确，区分相对路径与绝对路径。