css3中怎樣實現div的2d,3d旋轉

2022-11-20 20:11:16 字數 2269 閱讀 7282

1樓:

新建乙個html檔案粘過去:

2d 旋轉

3d 旋轉

2樓:

2d旋轉

3d旋轉放大

3樓:網海1書生

2d旋轉

3d旋轉

4樓:匿名使用者

html:

2d 旋轉

3d 旋轉

js:

var x,y,n=0,ny=0,rotint,rotyint

function rotatediv()

x=document.getelementbyid("rotate1")

clearinterval(rotint)

rotint=setinterval("startrotate()",10)

function rotateydiv()

y=document.getelementbyid("rotatey1")

clearinterval(rotyint)

rotyint=setinterval("startyrotate()",10)

function startrotate()

n=n+1

x.style.transform="rotate(" + n + "deg)"

x.style.webkittransform="rotate(" + n + "deg)"

x.style.otransform="rotate(" + n + "deg)"

x.style.moztransform="rotate(" + n + "deg)"

if (n==180 || n==360)

clearinterval(rotint)

if (n==360)

function startyrotate()

ny=ny+1

y.style.transform="rotatey(" + ny + "deg)"

y.style.webkittransform="rotatey(" + ny + "deg)"

y.style.otransform="rotatey(" + ny + "deg)"

y.style.moztransform="rotatey(" + ny + "deg)"

if (ny==180 || ny>=360)

clearinterval(rotyint)

if (ny>=360)

5樓:我的人生

上面不是寫的很清楚麼div

6樓:青羽神王

transform:rotatey(130deg);

-webkit-transform:rotatey(130deg); /* safari and chrome */

-moz-transform:rotatey(130deg);

如何用css3實現360度旋轉動畫

7樓:匿名使用者

寫了例子,效果不是很好,僅供參考.

8樓:0毛毛

transform:rotate(180deg) deg就是只2維的多少度

如何css製作3d旋轉立方體效果?

9樓:

具體步驟如下:

二、立方體的每乙個面都有它自己的元素。我們稍後會使用css來將立方體的6個面放置到正確的位置上。

四、css perspective屬性是乙個比較複雜的css3屬性。最好的理解它的方法是看完文件後,自己動手修改一下demo中的perspective屬性來看看它的變化。

下面需要給包含立方體6個面的立方體的容器.cube提供樣式:

1、.cube

5、在進過上面對立方體6個面的一系列設定之後,現在我們可以為6個面製作變形效果,以使它們組裝為乙個立方體。

6、rotatey的值可以旋轉立方體的各個面,使上面的文字處於正確的位置上。

7、而 translatez 的值使元素在指定容器中向前或向後移動。translatey的值看起來有些混亂,但是請記住,它的作用是通過透明的面板來使指定的面公升高或降低來製作3d效果。

8、每乙個面都有自己的translations值來使它們處於適當的位置上。你可以自己修改一下這些值來看看效果。

css3裡怎樣使div從左(無)到右(有)滑入頁面

如下 lorem ipsum dolor sit amet,consectetur adipisicing elit.minima quisquam tempora quaerat dolores molestias reiciendis vero labore voluptates necessi...

css3實現動畫效果,怎樣使他無限迴圈動下去

animation test 2s infinite linear infinite就是迴圈.css3 實現動畫效果,怎樣使他無限迴圈動下去 animation mymove 5s infinite 在animation後面加上infinite就可以無限迴圈,另外還可以做反向迴圈使用animatio...

2D和3D動漫的區別,動畫片2d和3d有什麼區別

區別copy 1 3d和2d的感官 上體驗不同。2 3d相比來bai說du更有空間感,更讓人zhi身臨其境。2d即二維,在dao乙個平面上的內容就是二維。二維即左右 上下兩個方向,不存在前後。在一張紙上的內容就可以看做成是二維。即只有面積,沒有立體。二維是平面技術的一種,例如普通的平面動漫,稱之為二...