css rotate(90deg)是旋转了90度还是旋转到90度

html-css026

css rotate(90deg)是旋转了90度还是旋转到90度,第1张

是顺时针方向旋转90度,负数则是逆时针方向。

“旋转90度”这样的说法是不成立的,因为一个物体(或者说元素)本身是不存在角度的,你不能说这个物体在旋转前就是0度吧,因为你是根据什么说它是0度的呢?横边还是竖边啊?既然不能确定,那“旋转到xx度”的说法也就是不存在的,只能说相对于当前的位置旋转了xx度,这样的话不管以哪个边来计算角度都一样了。

写了一个小例子:

Css Code:

.rotate{

-webkit-transform: rotate(90deg)

-moz-transform: rotate(90deg)

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1)

background:#ddd

height:200px

width:200px

}

这里需要注意的是:

1. rotate(<angle>) :其中angle是指旋转角度,如果设置的值为正数表示顺时针旋转,如果设置的值为负数,则表示逆时针旋转。

2. IE的图形旋转滤镜,它可以有4个旋转值:0, 1, 2,和3。

Xhtml Code:

<div class="rotate">

<img src="http://img.baidu.com/img/logo-zhidao.gif" alt="" />这里是你想要变形的任何的元素。

</div>

看一下效果吧,本例div中的图片以及文字都顺时针旋转了90度。