css3 中怎样实现div的2d,3d旋转?

html-css029

css3 中怎样实现div的2d,3d旋转?,第1张

新建一个HTML文件粘过去:

<p onclick="rotateDIV()" id="rotate1" class="animated_div" style="transform: rotate(360deg)">2D 旋转</p>

<p onclick="rotateYDIV()" id="rotatey1" class="animated_div" style="transform: rotateY(180deg)">3D 旋转</p>

<style>

p {

margin: 12px 0 0 0

line-height: 150%

}

#rotate1, #rotatey1 {

border: 1px solid #000000

background: red

margin: 10px

opacity: 0.7

}

.animated_div {

width: 60px

height: 40px

color: #ffffff

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

line-height: normal

text-align: center

vertical-align: middle

}

#rotate1,#rotatey1 { border:1px solid #000000 background:red margin:10px opacity:0.7 }

</style>

<script><!--var x,y,n=0,ny=0,rotINT,rotYINTfunction 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+1x.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+1y.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:rotate(720deg)

-ms-transform:rotate(720deg)  /* IE 9 */

-moz-transform:rotate(720deg)  /* Firefox */

-webkit-transform:rotate(720deg) /* Safari 和 Chrome */

-o-transform:rotate(720deg)  /* Opera */ 浏览器支持:

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。 定义和用法

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

为了更好地理解 transform 属性,请查看这个演示。

默认值:none    

继承性:no    

版本:CSS3    

JavaScript 语法:object.style.transform="rotate(7deg)"