热门关键字:
jquery > jquery教程 > jquery教程 > html中自动旋转90度

html中自动旋转90度

504
作者:管理员
发布时间:2021/7/6 17:03:50
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4988
  Firefox下:-moz-transform:rotate(-90deg);


  -webkit-transform:rotate(-90deg);


  ie下:filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


  这里是ie滤镜代码部分,前面长长的大小写错综的部分我们不用管它,看后面的”rotation=3″这是关键,这里的参数可以是0,1,2,3,没有4,要是是4啊,5啊之类的,图片就不旋转了。


  旋转的角度只要将这些数值乘以90(π/2)就可以了,所以呢”rotation=3″表示顺时针旋转270度,与transform:rotate(270deg);是一个意思。所以,这里,就会有些小小的局限——不能实现任意角度的旋转,只能是90度,180度以及270度。


  但是,IE浏览器不是个简单的罗罗,要实现任意角度的旋转,它还是有办法的,只是要比上面的麻烦些,难理解些,要用到矩阵变换滤镜。


  demo如下:


  img{


  margin:100px auto 0;


  -moz-transform:rotate(-90deg);


  -webkit-transform:rotate(-90deg);


  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);


  }




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jQuery
友荐云推荐