code

<div>

<p>请将鼠标悬停在下面的元素上，即可查看 2D 和 3D 转换之间的区别：</p>

<style>
#rotate2D,#rotate3D {
    width: 80px;
    height: 70px;
    color: white;
    position:relative;
    font-weight:bold;
    font-size:15px;
    padding:10px;
    float:left;
    margin-right:50px;
    border-radius:5px;
    border:1px solid #000000;
    background:red;
    margin:10px;
	box-sizing: border-box;
}
</style>

<script>

var x,y,n=0,ny=0,rotINT,rotYINT
function rotateDIV()
{
x=document.getElementById("rotate2D")
clearInterval(rotINT)
rotINT=setInterval("startRotate()",10)
}
function rotateYDIV()
{
y=document.getElementById("rotate3D")
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}
}
}

</script>

<div style="height:80px;">
<div onmouseover="rotateDIV()" id="rotate2D" style="transform: rotate(360deg);">2D rotate</div>
<div onmouseover="rotateYDIV()" id="rotate3D" style="transform: rotateY(180deg);">3D rotate</div>
</div>


<ul>
<li><code>transform</code></li>
</ul>
</div>

元素

面的

鼠标

526互联

请将鼠标悬停在下面的元素上，即可查看 2D 和 3D 转换之间的区别

code