css3 中怎样实现div的2d，3d旋转？

答案:6 悬赏:20 手机版

解决时间 2021-04-02 19:28

提问者网友：雨不眠的下
2021-04-02 14:38

最佳答案

五星知识达人网友：深街酒徒
2021-04-02 15:19

上面不是写的很清楚么
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); -moz-transform: rotateY(130deg); }

全部回答

1楼网友：北城痞子
2021-04-02 19:33

transform:rotateY(130deg);
-webkit-transform:rotateY(130deg);
-moz-transform:rotateY(130deg);

2楼网友：鱼芗
2021-04-02 18:20

新建一个HTML文件粘过去:

2D 旋转

3D 旋转

3楼网友：不想翻身的咸鱼
2021-04-02 18:13

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){n=0}
}
}
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){ny=0}
}
}

4楼网友：过活
2021-04-02 16:39

2D旋转

3D旋转