HTML5 3D魔方旋转拼图代码

1、准备好需要用到的图标。

3、书写hmtl代码。<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>

5、书写并添加js代码。<script src='js/hammer.min.js'></script><script src="js/index.js"></script>

7、查看效果。