<!DOCTYPE html>
<html>
<head>
<style>
.animated_div {
width: 100px;
height: 80px;
color: blue;
position: relative;
font-weight: bold;
padding: 20px 10px 0px 10px;
float: left;
margin: 20px;
margin-right: 50px;
border: 1px solid #888888;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font: 12px Verdana, Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
background-color:green;
}
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#rotatey1
{
transform:rotateY(120deg);
-webkit-transform:rotateY(120deg); /* Safari and Chrome */
-moz-transform:rotateY(120deg); /* Firefox */
}
</style>
</head>
<body>
<p onclick="rotateDIV()" id="rotate1" class="animated_div" style="-webkit-transform: rotate(360deg);">2D 旋转</p>
<p onclick="rotateYDIV()" id="rotatey1" class="animated_div" style="-webkit-transform: rotateY(180deg);">3D 旋转</p>
</body>
</html>
<script>
<!--
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}
}
}
//-->
</script>
| 属性 | 浏览器支持 | ||||
|---|---|---|---|---|---|
| transform | |||||
Internet Explorer 10 和 Firefox 支持 3D 转换。css
Chrome 和 Safari 须要前缀 -webkit-。html
Opera 仍然不支持 3D 转换（它只支持 2D 转换）。css3