前几天我发现了一个非常实用、美观的翻转显示区块的代码，可以很好地用在网站的侧边栏上。由于它非常适合我的网站风格，并且我认为会对网站的访问者产生吸引力，我决定将它（扒）取下来。

这个翻转显示区块的代码实现起来并不难，只需要使用一些CSS代码就可以实现。

翻转显示区块实现步骤

第一步，在想要展示的位置添加HTML，一般侧栏最好，里面的url为点击后跳转到的网页。

<div class="textwidget custom-html-widget"><div class="qqg-card-widget" id="qqg-card-wechat" onclick="window.open('https://www.zxki.cn');">
    <div id="qqg-flip-wrapper">
      <div id="qqg-flip-content">
      <div class="qqg-face"></div>
      <div class="qqg-back qqg-face"></div>
    </div></div></div></div>

第二步，添加CSS到全局css文件中，添加之后需要修改图片url地址，素材图片在附件下载。

第三步，下载附件图片素材上传到服务器，并修改css里面的url就行了，F5刷新就可以看到效果了。