本文通過原生JS，點擊事件，鼠標按下、鼠標抬起和鼠標移動事件，實現3D立方體的拖動旋轉，并將旋轉角度實時的反應至界面上顯示。
實現原理：通過獲取鼠標點擊屏幕時的坐標和鼠標移動時的坐標，來獲得鼠標在X軸、Y軸移動的距離，將距離實時賦值給transform屬性。
從而通過改變transform：rotate屬性值來達到3D立方體旋轉的效果：
HTML代碼塊：
XML/HTML Code復制內容到剪貼板
<body>
<input type="button" class="open" value="點擊散開"/>
<input type="text" class="xNum" value="0"/>//X軸旋轉角度
<input type="text" class="yNum" value="0"/>//Y軸旋轉角度
<input type="text" class="zNum"/>
<div class="big_box">
<div class="box">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</div>
</div>
</body>
CSS代碼塊：
CSS Code復制內容到剪貼板
<style>
body{cursor: url("img/openhand1.png"),auto;}
.big_box{
width: 500px;
height: 500px;
margin: 200px auto;
}
.box{
-webkit-transform-style: preserve-3d;
新聞熱點
疑難解答
