请将鼠标悬停在下面的元素上,即可查看 2D 和 3D 转换之间的区别:
2D rotate 3D rotatetransform
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 onm ouseover="rotateDIV()" id="rotate2D" style="transform: rotate(360deg);">2D rotate</div>
<div onm ouseover="rotateYDIV()" id="rotate3D" style="transform: rotateY(180deg);">3D rotate</div>
</div>
<ul>
<li><code>transform</code></li>
</ul>
</div>
标签:style,rotate,2D,ny,鼠标悬停,deg,3D
From: https://www.cnblogs.com/wbw121124/p/17947820