這是一個圖片效果,很簡單實用,只需要一個"rotate3Di.js"的插件就行,
關於rotate的用法有如下幾種:
$(選擇器).rotate3Di(30); //把圖片3D旋轉30度
$(選擇器).rotate3Di(180, 1000);//經過1s把圖片3D順時針旋轉180度
$(選擇器).rotate3Di('-=180', 1000);//每過1s把圖片3D逆時針旋轉180度
$(選擇器).rotate3Di('flip', 1000);//經過1s把圖片逆時針旋轉180度
$(選擇器).rotate3Di('unflip', 1000);//與'flip'連用
$(this).rotate3Di('toggle', 1000);//相當於'flip'和'unflip'連用
等
下面是一段鼠標移過時和移走時圖片3D旋轉的一段代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="iii" style="width:500px;height:400px;background:red;" class="iii">
<img src="images/0.jpg" name="imge1" class="ii" alt="" />
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="rotate3Di.js"></script>
<script type="text/javascript">
$(".iii").mouseover(function(){
$(".ii").stop().rotate3Di(180,1000);
});
$(".iii").mouseout(function(){
$(".ii").stop().rotate3Di(0,1000);
});
</script>
</body>
</html>