给网页添加个魔方旋转效果

本文为博主原创文章，转载留个版权即可（例如：本文转载小枫网络：www.xfabe.com）

效果展示：

首先把这串代码粘贴到<head>里面（引入外部的css）

    <link rel="stylesheet" href="https://links.xfyun.club/xfyun/Magic-Cube.css">

再把下面这部分代码放到</body>上面

文字区：

    <div class="xf_box">
        <div class="xf_rubik_cube">
            <a class="handsome_xf" href="#!">小枫好帅</a>
            <a class="handsome_xf" href="#!">我也这么认为</a>
            <a class="handsome_xf" href="#!">他真的好帅</a>
            <a class="handsome_xf" href="#!">我爱si他了</a>
            <a class="handsome_xf" href="#!">想给他生猴子</a>
            <a class="handsome_xf" href="#!">mua~枫！</a>
        </div>
    </div>

图片区：

    <div class="xf_box">
        <div class="xf_rubik_cube">
            <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a>
            <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a>
            <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a>
            <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a>
            <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a>
            <a class="handsome_xf" href="#!"><img src="https://api.xfyun.club/cos.php" alt=""></a>
        </div>
    </div>