=360)
{
clearInterval(rotYINT)
if (ny>=360){ny=0}
}
}
//–>
.animated_div { width:60px; height:40px; color:#ffffff; position:relative; font-weight:bold; font-size:15px; padding:10px; float:left; margin:20px; margin-right:50px; border:1px solid #888888; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; } #div1 {background:#92B901;transform:rotate(30deg);-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);-moz-transform:rotate(30deg);} #div2 {background:#f98450;transform:scale(2,2);-webkit-transform:scale(2,2);-o-transform:scale(2,2);-moz-transform:scale(2,2);} #div3 {background:#1ec7e6;transform:skew(30deg,20deg);-webkit-transform:skew(30deg,20deg);-o-transform:skew(30deg,20deg);-moz-transform:skew(30deg,20deg);} #div1 {-ms-filter: ”progid:DXImageTransform.Microsoft.Matrix(M11=0.8660254037844384, M12=-0.5000000000000004, M21=0.5000000000000004, M22=0.8660254037844384, SizingMethod=auto expand)”;} #div2 {-ms-filter: ”progid:DXImageTransform.Microsoft.Matrix(M11=2, M12=0, M21=0, M22=2, SizingMethod=auto expand)”;} #div3 {-ms-filter: ”progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0.5773502691896265, M21=0.3639702342662022, M22=1, SizingMethod=auto expand)”;} #rotate1,#rotatey1 { border:1px solid #000000; background:red; margin:10px; opacity:0.7; }

CSS3 3D 转换

3D Transforms

CSS3 允许您使用 3D 转换来对元素进行格式化。

在本章中，您将学到其中的一些 3D 转换方法：

• rotateX()
• rotateY()

点击下面的元素，来查看 2D 转换与 3D 转换之间的不同之处：