阿夜在前些天发现一个翻转显示的区块代码，挺适合在网站侧边栏使用的，而且阿夜感觉这个还是非常实用美观的，所以特分享给有需要的兄弟们。

废话不多说，看看代码的效果~

那么如何达到上面演示图一样的效果呢，其实很简单，只需要按下面教程操作两分钟就可以

教程：

首先，把下面的代码放至需要的页面源文件当中。WordPress的话可以添加到自定义HTML小工具当中。

<div class="textwidget custom-html-widget"><div class="card-widget" id="card-wechat" onclick="window.open('');">
    <div id="flip-wrapper">
      <div id="flip-content">
      <div class="face"></div>
      <div class="back face"></div>
    </div></div></div>
<link rel="stylesheet" href="css文件路径" type="text/css"></div>

Tips：本HTML代码需配合本文顶部提供的CSS代码搭配使用，否则无效果。

之后，将下方CSS代码放至主题设置的自定义CSS样式里，或者自行引用CSS文件。

放置之前请修改CSS代码里的图片为你的，公众号二维码请自行替换。

（可联系阿夜有偿帮助弄好，不过仅限替换二维码图片和达到本文演示一样所呈现的翻转效果）。

• wechatface.png（翻转前图片，无需替换）
• wx_gzh.png（翻转后图片，需替换二维码）
• gzh_cover.png（微信Logo背景，无需替换）
• 本文由AA源码网（aaym.net）整理分享

图片下载地址