HTML5 CSS3 3D魔方拼图在线益智小游戏网页开发。一款基于HTML5和CSS3的3D立方体拼图应用，一共有8个小立方体组成的3D拼图，我们可以点击立方体或者方向键完成拼图，同时我们也可以让立方体保持旋转。采用响应式设计，自适应手机移动端，用户体验友好。
ps：推荐一下我的微细公众号：webqiand，学习前端有不懂的（学习方法，学习路线，如何学习有效率的问题）可以关一下，公众号有不错的学习教程，开发工具、电子书籍分享。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>HTML5 CSS3 3D魔方拼图在线益智小游戏网页开发</title> <meta name="keywords" content="HTML5,CSS3,3D魔方,拼图,在线益智小游戏,网页开发" /> <meta name="description" content="HTML5 CSS3 3D魔方拼图在线益智小游戏网页开发。一款基于HTML5和CSS3的3D立方体拼图应用，一共有8个小立方体组成的3D拼图，我们可以点击立方体或者方向键完成拼图，同时我们也可以让立方体保持旋转。采用响应式设计，自适应手机移动端，用户体验友好。" /> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material Icons'> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="body-wrapper"> <div class="cubetwo-help-component"> <div class="cubetwo-row"> <div class="cubetwo-device-info"> <i class="material-icons"> touch_app </i> <div> tap or swipe with fingers </div> </div> <div class="cubetwo-device-info"> <i class="material-icons"> mouse </i> <div> click or swipe with mouse </div> </div> <div class="cubetwo-device-info cubetwo-device-info--keyboard"> <i class="material-icons"> keyboard </i> <div> keyboard keys </div> <div class="cubetwo-device-info-groups"> <div class="cubetwo-device-info-group"> <div> <i class="material-icons"> keyboard_tab </i> <i class="material-icons"> keyboard_arrow_up </i> </div> <div> <i class="material-icons"> keyboard_arrow_left </i> <i class="material-icons"> keyboard_arrow_down </i> <i class="material-icons"> keyboard_arrow_right </i> </div> </div> <div class="cubetwo-device-info-group"> <div> <span> q </span> <span> w </span> <span> e </span> </div> <div> <span> a </span> <span> s </span> <span> d </span> </div> <div> <span> x </span> <span> y </span> <span> z </span> </div> </div> </div> </div> </div> <a href="https://github.com/kunukn/cube-two" target="_blank" class="cubetwo-github-link"> github project </a> </div> <div class="cubetwo-menu-component"> <div class="cubetwo-row"> <button class="cubetwo-js cubetwo-btn cubetwo-btn-scramble"> scramble </button> <button class="cubetwo-js cubetwo-btn cubetwo-btn-spin"> spin </button> <button class="cubetwo-js cubetwo-btn cubetwo-btn-solve"> solve </button> </div> </div> <div class="cubetwo-component" id="cubetwo-component-1"> <div class="cubetwo-rotation-view"> <div class="cubetwo-cube-group cubetwo-cube-group--1"> <div class="cubetwo-cube-1" tabindex="0" data-type="cubetwo"> <div class="cubetwo-cube" data-type="cubetwo-display" data-index="1"> <div data-type="front"> <div> front </div> </div> <div data-type="up"> <div> up </div> </div> <div data-type="right"> <div> right </div> </div> <div data-type="back"> <div> back </div> </div> <div data-type="down"> <div> down </div> </div> <div data-type="left"> <div> left </div> </div> </div> <div class="cubetwo-cube" data-type="cubetwo-touch"> <div data-type="front"> touch front </div> <div data-type="up"> touch up </div> <div data-type="left"> touch left </div> </div> </div> <div class="cubetwo-cube-2" tabindex="0" data-type="cubetwo"> <div class="cubetwo-cube" data-type="cubetwo-display" data-index="2"> <div data-type="front"> <div> front </div> </div> <div data-type="up"> <div> up </div> </div> <div data-type="right"> <div> right </div> </div> <div data-type="back"> <div> back </div> </div> <div data-type="down"> <div> down </div> </div> <div data-type="left"> <div> left </div> </div> </div> <div class="cubetwo-cube" data-type="cubetwo-touch"> <div data-type="front"> touch front </div> <div data-type="up"> touch up </div> <div data-type="right"> touch right </div> </div> </div> 代码运行效果截图：
需要这个项目css、js代码、图片的可以找我免费领取。如果大家不怕麻烦可以关注我后私信我“前端学习资料”几个字 找我领取 24小时在线！
