js自動旋轉代碼,js3d旋轉

本文目錄一覽：

• 1、如何實現Three.js中的模型世界軸旋轉和自旋轉
• 2、js代碼怎麼讓一張圖片自動360度水平旋轉
• 3、js實現圖片旋轉效果
• 4、js設置圖片隨機旋轉角度
• 5、怎樣用js和css令一個div不停旋轉。。求代碼。。。

如何實現Three.js中的模型世界軸旋轉和自旋轉

ThingJS 使用角度控制物體旋轉。

通常使用如下屬性和介面控制物體旋轉：

在世界坐標系下，使用 angles 屬性來設置或訪問旋轉信息。

obj.angles = [0,45,0]   //設置世界坐標系Y軸向旋轉45角度

在父物體坐標系下，使用 localAngles 屬性來設置或訪問旋轉信息。

obj.localAngles = [0,45,0]   //設置父物體坐標系Y軸向旋轉45角度

在自身坐標系下，使用如下介面方法：

//使用rotate，可輸入角度和軸向。設置沿給定軸向轉一定角度，傳入的旋轉軸是自身坐標系下的軸方向       obj.rotate( 45, [0,1,0])      //沿自身x軸向旋轉，等同於 obj.rotate( 30, [1,0,0])       obj.rotateX(30)  //沿自身y軸向旋轉，等同於 obj.rotate( 90, [0,1,0]) obj.rotateY(90)

//沿自身z軸向旋轉，等同於 obj.rotate( -45, [0,0,1])         obj.rotateZ(-45)    

我們還可以使用 lookAt 介面方法，使得物體的觀察方向一直對準一個位置或物體

//讓物體面向[0,1,0]，該坐標是在世界坐標下obj.lookAt( [0,1,0])   //讓物體一直面向攝影機obj.lookAt( app.camera )        //讓物體一直面向一個物體obj.lookAt( obj )  //讓物體一直面向一個物體,同時物體沿自身Y軸向再旋轉90度obj.lookAt( obj， [0,90,0] )              //取消lookAt功能obj.lookAt( null )  

查看示例網頁鏈接

正常情況下，子物體會隨著父物體旋轉而一起旋轉，如果想控制子物體不隨父物體旋轉，可通過設置子物體的 inheritAngles 屬性為 false 而實現。

js代碼怎麼讓一張圖片自動360度水平旋轉

!DOCTYPE HTML

html

head

meta charset=UTF-8

titleYuGiOh/title

style type=”text/css”

#div {

    position: absolute;

    top: 50px;

    left: 300px;

    width: 300px;

    height: 300px;

    line-height: 300px;

    text-align: center;

    border: 1px solid black;

}

/style

script type=”text/javascript”

    var rotateHTML5 = function (limit)

    {

        var reg = /(rotate\([\-\+]?((\d+)(deg))\))/i;

        var wt = div.style[‘-webkit-transform’], wts = wt.match (reg);

        var $2 = RegExp.$2;

        console.log ($2);

        div.style[‘-webkit-transform’] = wt.replace ($2, parseFloat (RegExp.$3) + limit + RegExp.$4);

    }

    var rotateIE = function (obj)

    {

        var d = !!obj.d ? obj.d : 1;

        var r = d * Math.PI / 180;

        costheta = Math.cos (r);

        sintheta = Math.sin (r);

        obj.style.filter = “progid:DXImageTransform.Microsoft.Matrix()”;

        var item = obj.filters.item (0);

        var width = obj.clientWidth;

        var height = obj.clientHeight;

        item.DX = -width / 2 * costheta + height / 2 * sintheta + width / 2;

        item.DY = -width / 2 * sintheta – height / 2 * costheta + height / 2;

        item.M11 = costheta;

        item.M12 = -sintheta;

        item.M21 = sintheta;

        item.M22 = costheta;

        obj.timer = setTimeout (function ()

        {

            var dx = d + 1;

            dx = dx  360 ? 1 : dx;

            obj.d = dx;

            rotate (obj, dx);

        }, 30);

    };

    var start = function ()

    {

        if (!!div.interval)

        {

            clearInterval (div.interval);

            delete div.interval;

        }

        else

        {

            div.interval = setInterval (function ()

            {

                /.*webkit.*/i.test (navigator.userAgent) ? rotateHTML5 (1) : rotateIE (div);

            }, 30);

        }

    }

/script

/head

body

    button onclick=”start();”rotate/button

    div id=”div” style=”border-radius: 90px; -webkit-transform: rotate(10deg);”ROTATE/div

/body

/html

js實現圖片旋轉效果

1、首先準備一個HTML文檔，文檔中準備好兩個圖片，接下來會對這兩個圖片進行旋轉。

2、然後對HTML中的內容定義一些樣式，如下圖所示，主要是標題以及ul的樣式。

3、接下來就給圖片所在的li定義寬高，如下圖所示。

4、然後給圖片設置過渡效果，過渡使用transition屬性，如下圖所示。

5、當滑鼠懸停在圖片上時，通過rotate給其設置變形，如下圖所示，正數代表的是順時針，負數代表的是逆時針。

6、最後運行程序，會看到如下圖所示的效果，滑鼠放在圖片上會順時針或者逆時針旋轉。

js設置圖片隨機旋轉角度

代碼應該是：

imgcss[i].style.transform=”rotate(” + j + “)”;

首先 j是變數 雙引號裡面套單引號 還是字元串， 不是變數

其次 字元串拼接要寫加號

怎樣用js和css令一個div不停旋轉。。求代碼。。。

如果用js控制，需要遍歷HTML文檔，提取最後的DIV，然後再加樣式：

script type=”text/javascript”

$(document).ready(function(){

$(“div”).last().addClass(‘highlight’); //添加class

$(“div”).last().css(“background”, “red”); //直接添加樣式

});

/script

如果是css控制，需要在div裡面添加class樣式，或者寫行內樣式控制：

div style=”color:red” class=”color”內容/div

style

.color{color:red;}

/style