t0ur1st

我的博客一共有俩个3D旋转魔方，一个是在侧边栏的蕾姆魔方 这个魔方旋转起来很机械，另一个是在页脚的刘人语魔方 这个魔方是双重的，旋转起来很自由而且鼠标滑过的时候会展开。3D旋转墙是被我放在页脚的，通过php代码可以使它只能在PC端显示、手机和平板均不会显示。

3D旋转魔方：

查看蕾姆魔方演示页面 可以直接点击链接进入网页然后ctrl+u查看源代码
我是在wordpress的小工具中，添加自定义html代码到侧边栏来实现的。这个3d_cube_slider.css文件其实就是源代码中的<style></style>标签中的内容。

<link rel="stylesheet" href="tanyaodan.com/wp-includes/css/3d_cube_slider.css">
<div class="slider">
  <div class="container">
    <div class="slide x"></div>
    <div class="slide y"></div>
    <div class="slide z"></div>
  </div>
</div>

查看刘人语魔方演示页面 可以直接点击链接进入网页然后ctrl+u查看源代码
可以直接通过link来召唤刘人语魔方٩(ˊᗜˋ*)و：

<link rel="stylesheet" href="tanyaodan.com/test/reyi_cube.html">

3D旋转墙：

查看刘人语旋转墙演示页面 可以直接点击链接进入网页然后ctrl+u查看源代码
可以直接通过link来召唤刘人语旋转墙٩(ˊᗜˋ*)و：

<link rel="stylesheet" href="tanyaodan.com/test/3d_wall.html">

我一开始是直接将刘人语魔方和刘人语旋转墙添加在主题页脚footer.php中的，然后我发现我这样写的话，在手机上访问博客，左滑可以看到刘人语旋转墙，但是她上面那一片都是空白的 一点都不美观，然后询问了落月成孤倚之后，晓得了有Mobile_Detect.php这个好东西，下载之后直接将.php文件放入服务器中就可以用request和include来进行调用~然后具体的使用方法可以参考下面这段代码：3d_wall是只在PC端使用，3d_cube是PC端、手机端、平板端都可以看见。

<?php
    include("Mobile_Detect.php");
    $detect = new Mobile_Detect();
    if(!$detect->isMobile() && !$detect->isTablet()){
        include("3d_wall.html");
    }
    include("3d_cube.html");
?>