如图所示
代码如下
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>h3{text-align: center;color: #5A5A5A;}body{background: #000;}#box{width: 200px;height: 200px;margin:150px auto;background: #ccc;position: relative;transform:perspective(800px) rotateY(-60deg) rotateX(45deg);transform-style:preserve-3d;}#box div{width:100%;height:100%;position: absolute;top:0;left: 0;background-size:cover; -webkit-box-shadow:0 0 100px #5fbcff;opacity: .8;}.front{transform:translateZ(100px);background: url(images/a5.png);}.back{transform:translateZ(-100px);background: url(images/a1.png);}.left{transform:translateX(-100px) rotateY(90deg);background: url(images/a2.png);}.right{transform:translateX(100px) rotateY(90deg);background: url(images/a3.png);}.top{transform:translateY(-100px) rotateX(90deg);background: url(images/a4.png);}.bottom{transform:translateY(100px) rotateX(90deg);background: url(images/a8.png);}</style><script>window.onload=function(){var oBox=document.querySelector('#box');var y=-60;var x=45;oBox.onmousedown=function(ev){var oEvent=ev||event;var disX=oEvent.clientX-y;var disY=oEvent.clientY-x;document.onmousemove=function(ev){var oEvent=ev||event;x=oEvent.clientY-disY;y=oEvent.clientX-disX;oBox.style.transform='perspective(800px) rotateX('+x+'deg) rotateY('+y+'deg)';};document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;};return false;};};</script></head><body><h3>按住鼠标左键拖动</h3><div id="box"><div class="front"></div><div class="back"></div><div class="top"></div><div class="bottom"></div><div class="left"></div><div class="right"></div></div></body></html>
素材：
images文件夹下：
喜欢请点个赞吧～～～
————————————————————————调皮的分割线4月9日更——————————————————————————————————————————————
各种通过html写成的类似ppt字体特效，
鼠标跟随特效
星空粒子背景，雪花背景，气泡背景，树叶飘落，烟花光束背景，
轮播图，3D轮播图
各种卡通动画效果
成型404界面
3D六面体（盒子）
翻书特效
画轴特效
翻书特效
返回顶部小插件
照片影集特效
登录界面
导航栏侧边栏
各种button样式
返回顶部3D六面体鼠标绑定跟随星空粒子背景
有需要的私聊我，咸鱼在售，five软妹币～～～
咸鱼（静静静静静rj）：https://market./app/idleFish-F2e/IdleFishWeexPersonalPage/PersonalHome?userid=2571872530&ut_sk=1.XSCipxxIJuEDAOncPqzi9sXi_21407387_1586154452710.Copy.mypage.2571872530.2571872530&type=1&wh_weex=true&forceFlush=1
