欢迎光临《小雷的网站》
加入收藏 | 设为首页 | 联系我们
小雷的网站
游客,您好!
请使用QQ先登陆
  • 最新公告:如果有什么问题,请大家联系客服处理.客服在线时间:12:00-23:59 其它时间段请留言.
  • 博文详细内容

    CSS旋转图片的代码
    资讯栏目:技术文摘 | 发布者:小雷 | 关注度:1499次 | 发布时间:2018-10-19 00:00:00

    CSS3 图片旋转 特效 旋转 角度

    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如下:

        <style >

          img{

          margin:100px auto  0;

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

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

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

         

          }

        </style>

          


    转载请注:小雷的网站 http://www.leihx.com/news/25.html
    评论

    您还没有登陆,请登陆后再评论吧!
    本站只支持QQ登陆,请不要发布不当的以及违反国家法律的言论!
    版权信息:@2018-2025 www.leihx.com 网站访问量:5352566人次 互联网ICP备案:黔ICP备15016820号-4
    联系地址:贵州省铜仁市碧江区川硐教育园区 合作咨询:400-180-5676 (周一至周五 9:00-18:00)