3D旋转魔方和3D旋转墙

正文索引 [隐藏]

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

3D旋转魔方:

查看蕾姆魔方演示页面 可以直接点击链接进入网页然后ctrl+u查看源代码

我是在wordpress的小工具中,添加自定义html代码到侧边栏来实现的。这个3d_cube_slider.css文件其实就是源代码中的<style></style>标签中的内容。

<link rel="stylesheet" href="https://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="https://tanyaodan.com/test/reyi_cube.html">

3D旋转墙:

查看刘人语旋转墙演示页面 可以直接点击链接进入网页然后ctrl+u查看源代码

可以直接通过link来召唤刘人语旋转墙٩(ˊᗜˋ*)و:

<link rel="stylesheet" href="https://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");
?>