IE 滤镜实现图片旋转效果

最新推荐文章于 2021-06-09 19:10:54 发布
原创 最新推荐文章于 2021-06-09 19:10:54 发布 · 1.8k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#web前端

本文介绍了如何在IE浏览器中利用滤镜效果实现图片旋转。两种方法分别为BasicImage和Matrix，详细解释了各自的工作原理和参数设置。BasicImage限制为四个预设角度，而Matrix通过矩阵计算可实现任意角度旋转。


IE滤镜可以实现页面上各种复杂的特效，如半透明、阴影、投影、遮罩、模糊、渐变、波浪、图片翻转等效果。

通过特性值filer定义一组类似函数调用的字符串来实现。如在HTML元素中定义：

<ELEMENT STYLE="filter: progid:DXImageTransform.Microsoft.filtername(sProperties)" >

以下是实现图片旋转效果的例子：

第一种方法：BasicImage

最低0.47元/天 解锁文章
ie 滤镜 向量旋转公式:
OnePiece
07-16 1038
在二维坐标系中，一个位置向量的旋转公式可以由三角函数的几何意义推出。 向左转|向右转 比如上图所示是位置向量R逆时针旋转角度B前后的情况。 在左图中，我们有关系： 　　x0 = |R| * cosA => cosA = x0 / |R| 　　y0 = |R| * sinA => sinA = y0 / |R| 　在右图
IE实现图片旋转
windhawk777的专栏
01-06 1383
在网页中打开的图片需要旋转。 百度了下滤镜的用法，将代码贴出来备忘。 function openwin(url) { var OpenWindow=window.open("./" + url); //写成一行 var s = url.substring(url.lastIndexOf(".") + 1, url.length); if (s == "jpg" || s
元素中心旋转在CSS3和IE滤镜中的实现
weixin_34080571的博客
12-18 272
为什么80%的码农都做不了架构师？>>> ...
网页中图片旋转的几种实现方式
weixin_30528371的博客
10-13 2281
网页中图片旋转一般有下面三种常见的实现方式： 一、 ie 滤镜 IE的图形旋转滤镜，通过指定BasicImage滤镜的rotation值旋转元素，旋转方向为顺时针，旋转的中心点为元素的左上角。rotation可以有4个旋转值：0, 1, 2,和3分别表示将元素旋转0度、90度、180度、270度。 浏览器支持： IE5.5+ CSS代码： .rotate{ filter: prog...
IE滤镜包括旋转角度、渐变
wangweiscsdn的博客
03-02 1305
旋转滤镜： filter:progid:DXImageTransform.Microsoft.BasicImage(enabled=bEnabled,grayScale=bGray,mirror=bMirror,opacity=fOpacity,XRay=bXRay) enabled:可选项，布尔值。设置或检索滤镜是否激活。默认true表示滤镜激活，取值false表示滤镜被禁止。 graySca
2013.12.05 js实现图片的旋转 兼容IE
我能坚持多久的专栏
12-05 1060
包括两部分内容，1.展示图片的文件showIm.jsp 2.控制图片旋转的js文件rotateImage.js showImg.jsp: ${title }      /getImgByte?id="/> var width = $('#image').width(); var height = $('#image').height(
ie 滤镜大全整理
09-28
此外，在某些情况下，为了确保滤镜能够正常工作，可能需要引入特定的IE滤镜命名空间，如"progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"用于实现旋转效果。 最后，虽然IE滤镜在现代网页设计中的使用...
基于HTML5 Canvas实现兼容多浏览器的图片旋转翻转效果
“类似新浪微博js图片旋转/翻转效果”这一主题涵盖了前端开发中多个关键技术点，涉及HTML5、Canvas绘图、JavaScript动态操作、CSS样式控制以及跨浏览器兼容性处理等多个层面。该项目的核心目标是实现一个类似于新浪...
使图片旋转的3种解决方案
12-04
图片旋转效果的研究最近在项目中需要做图片的旋转功能，我研究了一下。下面来总结下图片旋转在各个浏览器的支持情况 一、图片旋转的方案 1）css3实现图片旋转功能：支持的浏览器有chrome，firefox；opera是不支持的...
HTML5中图片旋转滤镜的应用及跨浏览器兼容性
描述中提到“图片旋转 ie利用画布滤镜 chrome利用画布”，这部分内容揭示了实现图片旋转的技术差异，即在不同浏览器环境下可能需要采用不同的方法。在Internet Explorer（IE）浏览器中可以利用画布滤镜来实现图片...
兼容ie图片旋转jquery-rotate.js
前端搬运工的博客
07-22 328
$(document).ready(function(){ $("#foo").rotate({ angle:15, bind:{ mouseover:function(){ $(this).rotate({ ani...
-moz-transform:rotate()
weixin_30721077的博客
08-10 280
目前越来越多的浏览器兼容CSS3标准了，就连IE浏览器老大哥也开始向CSS3低头，微软宣布IE9浏览器支持更多的CSS3属性，IE9更注重HTML5标准。不过CSS3里有一个使对象旋转的属性transform rotate，号称兼容CSS3的浏览器对它的支持也不算好，好在Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。唯独在IE浏览器里...
利用filter进行图片的旋转
dasuo1170的博客
02-20 302
在高级浏览器里面可以利用css3实现图片的旋转，可是对于IE来讲，需要利用filter属性。。 利用filter进行旋转： （1）如果只用旋转90度，那么可以直接用BasicImage(rotation=参数)来实现，其中参数为： 0：不旋转；1：90度 ;2：180度；3：270度 例子，旋转-90度，那么代码如下： IE：f...
progid:DXImageTransform.Microsoft.Matrix
mememama111的专栏
01-19 1002
说明： 使用矩阵变形实现对象内容的改变尺寸、旋转、上下或左右反转。 使用此滤镜可以建立下列效果： 左右反转。将 M11 和 M12 的值取负。 上下反转。将 M21 和 M22 的值取负。 改变尺寸。将 M11 和 M12 和 M21 和 M22 的值乘以相同的因数。对象内容尺寸会按比例增大或缩小。 使用 padding 属性能够使最终图像边角被剪切的机会降到最小. 语法： fil...
html中旋转属性,CSS的旋转属性在IE
weixin_33733742的博客
06-09 293
要在IE中旋转45度，您需要在样式表中使用以下代码：filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=0.7071067811865476,M12=-0.7071067811865475,M21=0.7071067811865475,M22=0.7071067811865476); /* ...
各种样式介绍
龙傲天的博客
01-17 907
一、特殊样式 cursor: pointer; 鼠标手掌样式 border-radius: 8px; 边框圆角 opacity:0.8;filter:alpha(opacity=80); 颜色变暗 text-overflow: ellipsis; 超出部分 显示省略号 二、功能样式 1、图片颜色变灰： /*黑白色 */ -webkit-fil...
IE矩阵滤镜Matrix旋转
weixin_30325793的博客
02-02 159
SS3 transform与IE filter .trans_skew { transform: skew(35deg); } .trans_scale { transform:scale(1, 0.5); } .trans_rotate { transform:rotate(45deg); } .trans_translate { transform:translate(10px...
html中如何使图片自动旋转90度,css实现图片旋转90度的方法
weixin_39530647的博客
06-02 1376
css实现图片旋转90度的方法发布时间：2020-08-31 11:44:39来源：亿速云阅读：550作者：小新小编给大家分享一下css实现图片旋转90度的方法，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！Firefox下：-moz-transform:rotate(-90deg);-webkit-transform:r...
IE浏览器中CSS动态滤镜效果展示及应用
动态滤镜效果通常需要使用CSS的`filter`属性，但是在早期的IE浏览器版本中，这些效果是通过`滤镜滤镜`属性来实现的。例如，`滤镜滤镜`属性可以应用在`div`、`span`等元素上，让它们产生旋转、倾斜、透明度变化等视觉...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值