今天給大家介紹一下jquery3d旋轉的教程。首先我們需要使用jquery進行操作，所以要先引入jquery庫。在head標簽中加入以下代碼：

<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>

接著，我們需要一個盒子來展示我們的3d旋轉效果。下面是一個寬高均為300px的div盒子：

<div id="rotate-box" style="width:300px; height:300px;"></div>

然后，在css中，我們可以對該盒子進行以下樣式設置：

#rotate-box {
position: relative;
transform-style: preserve-3d;
transition: transform 1s ease;
}

這樣我們就為我們的盒子設置好了3d特效。下面我們來看看具體的旋轉操作。 首先，我們需要在js中獲取到我們的旋轉盒子：

var rotateBox = $('#rotate-box');

然后，我們定義一個rotate函數，來控制旋轉操作。該函數接收兩個參數，分別為xAxis和yAxis，分別代表繞x軸和y軸旋轉的角度。函數代碼如下：

function rotate(xAxis, yAxis) {
rotateBox.css('transform', 'rotateX(' + xAxis + 'deg) rotateY(' + yAxis + 'deg)');
}

最后，我們可以在鼠標移動時，通過獲取鼠標位置，計算出盒子需要旋轉的角度，然后調用rotate函數來進行旋轉。具體代碼如下：

rotateBox.on('mousemove', function(event) {
var xAxis = -((event.clientY - $(this).offset().top) / 5);
var yAxis = ((event.clientX - $(this).offset().left) / 5);
rotate(xAxis, yAxis);
});

到這里，我們就完成了一個簡單的jquery3d旋轉效果。希望本文對大家有所幫助。