兼容IE的旋转效果

最新推荐文章于 2022-06-01 17:46:31 发布

牧夜

最新推荐文章于 2022-06-01 17:46:31 发布

阅读量5.9k

点赞数

文章标签： css3 旋转兼容 ie 图标

本文链接：https://blog.csdn.net/yeliang0616/article/details/43639225

版权

这篇博客介绍了两种在IE浏览器中实现旋转效果的兼容方案。方案一涉及切图并使用`transform: rotate(-45deg);`进行旋转。方案二通过外层和内层元素分别旋转实现，IE下的旋转利用滤镜，可以借助特定网站进行参数计算。

摘要由CSDN通过智能技术生成

先看看效果
chrome下
这里写图片描述

IE下效果相同，也就是该源码是一个兼容的方案，包括ie6-8。

这里介绍两个方案
方案1：
1.按照上图可以切一张图片，旋转45度保存
这里写图片描述

2.然后使该图片旋转-45度即可
transform: rotate(-45deg);

方案2：
1.这里不用切图，直接做一个方形的背景，文字也是自己填充，只不过要有两次旋转
2.外层div旋转-45度，内层文字旋转45度即可。

附上方案2源码，方案1的代码在2基础上去掉文字，然后自己切图即可。

<!DOCTYPE>  
<html >  
  <head>  
    <title> 旋转 </title>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <style type="text/css">  
      body { font-size:12px;font-family:tahoma

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

牧夜

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

css旋转、透明度兼容IE（书写水印，并且兼容Ie9 操作）

蓝_蓝的博客

05-03

2416

现在使用css3会比较方便实现一些功能，比如实现旋转、透明，但是这些个东西兼容IE是一件比较麻烦的事情。这次我通过filter实现了数据的旋转和半透明。顺便封装了一个兼容ie的水印，使用起来也会比较方便。下面是相应的代码和使用方法（有疑问欢迎随时提问）：（1）JS代码define( ,function(){ /* * resultDiv 最外面的容器 ...

DIV+CSS解决IE6，IE7，IE8，FF兼容问题

xhbmj的专栏

01-09

885

DIV+CSS解决IE6，IE7，IE8，FF兼容问题 1.IE8下兼容问题，这个最好处理，转化成IE7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了： 1. 2. 2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如 margin-left:10px!important;/*IE7,IE8,FF下是

参与评论您还未登录，请先登录后发表或查看评论

元素中心旋转在CSS3和IE滤镜中的实现

weixin_34080571的博客

12-18

143

为什么80%的码农都做不了架构师？>>> ...

html设置旋转中心兼容ie,CSS3 transform旋转属性在IE中的实现

weixin_29163797的博客

06-03

336

IE浏览器CSS transform旋转属性的演示body {font-family: "Arial", sans-serif;}#ptOfRef {border: #000 solid 3px;background: #6FF;width: 204px;height: 204px;position: absolute;top: 100px;left: 100px;}#example {posit...

ie中使用css旋转元素

weixin_44188300的博客

11-26

243

能搜这个的我觉得肯定是已经到ie不支持正常旋转的地步了，那就直接上方法了。then,如果还没试过普通方法请慎入。首先来个比较厉害的网站：计算ie旋转角度方法再送一个px和em转换的网站：em – px 这个之中计算出来是：这边提取重点： -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865477, M12=-0.7071067811865475, M21=0.7071067811865475, M22=-0

IE9兼容性CSS之一transform:rotate

Sophiego的博客

03-09

4760

项目总的框架是用angular js ，因为angular js 本身只兼容到IE9，所以IE9以下我们就不加考虑，在浏览器版本低于IE9以下给出提示框让小部分用户能够去下载grome的一个插件，以此来渲染IE以google 模式运行，要不升级浏览器。针对IE9,由于transform:rotate并不支持。当然我们只是为了让英文文字实现一个旋转90度的效果，仅此而已，换方法。

ie9支持css3中的rotate吗?,CSS3转换：旋转;(CSS3 transform: rotate; in IE9)

weixin_36106852的博客

08-04

329

CSS3转换：旋转;(CSS3 transform: rotate; in IE9)我有一个元素需要在我所做的设计中是垂直的。我已经得到了这个CSS，除了IE9以外的所有浏览器都可以使用。我使用IE7和IE8的过滤器：progid:DXImageTransform.Microsoft.BasicImage(rotation=3);这似乎使我的元素在IE9中透明化，CSS3'tranform'的...

兼容IE8的jQuery旋转木马幻灯片插件.zip

07-11

Carousel.js 是一个专为jQuery设计的旋转木马幻灯片插件，特别强调对IE8浏览器的兼容性，使得在旧版本的Internet Explorer上也能实现流畅的动态展示效果。这个插件非常适合用来创建吸引人的多媒体展示，比如电影海报...

兼容IE8的jQuery旋转木马幻灯片插件

07-10

本文将深入探讨如何创建一个兼容IE8的jQuery旋转木马（Carousel）幻灯片插件，以及涉及的相关知识点。 1. **jQuery核心概念**： - **选择器**：jQuery提供了一系列强大的选择器，如ID选择器 (#id)，类选择器 (....

IE CSS 动画无法旋转的问题

asd2437252087的博客

06-01

254

一开始我们写的这样的定义动画是这样写的旋转。。。测试今天就提了个ie11无法旋转的bug我们去找下这几个都兼容性很奇怪发现这两个属性都是支持IE11的,然后我去找了个兼容IE9的旋转属性 -ms-transform:rotate(属性)加上之后就正常了。。很奇怪

ie 滤镜旋转 div 实现css3的效果

OnePiece

07-17

1412

//ie 滤镜旋转回复到原来的位置 -2 减去 border 实现定点旋转 var orginW = target.clientWidth-2, orginH = target.clientHeight-2; var W=Math.abs(sinDeg*orginH)+Math.abs(cosDeg*orginW); var H=Math.abs(sinDeg*orgin

IE实现图片旋转

windhawk777的专栏

01-06

1310

在网页中打开的图片需要旋转。百度了下滤镜的用法，将代码贴出来备忘。 function openwin(url) { var OpenWindow=window.open("./" + url); //写成一行 var s = url.substring(url.lastIndexOf(".") + 1, url.length); if (s == "jpg" || s

html中旋转属性,IE中的CSS旋转属性

weixin_35639451的博客

06-09

220

小编典典要在IE中旋转45度，您需要在样式表中添加以下代码：filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.70710678118654...

IE中字体旋转90度的问题及解决方案

gavin710的专栏

05-07

2213

描述：我从网上找了一个javascript+css的下拉菜单菜单，这Chrome下用没有问题，可是到了IE中发现每个字都旋转了90度，类似下面这种，十份无奈。解决方案：这个是因为字体的问题，这里CSS设置的字体是：@Arial Unicode MS，改成宋体就没有这个问题的。

IE兼容rotate旋转效果

liona_koukou的博客

12-02

3129

要在IE下实现rotate旋转效果要用到滤镜，最简单的方法可以在 http://www.useragentman.com/IETransformsTranslator/ 上面这个地址的网站可以根据你的输入生成相应的代码：比如我在框里输入：rotate(330deg) 点击Translate to IE Matrix按钮下面会自动生成代码，复制要用的代码到我们的文件里就可以了我只想要兼

计算IE的旋转角度与滤镜

zhangxianya的专栏

07-29

711

本帖最后由 lshcw3c 于 2013-4-8 16:16 编辑在IE中使用CSS3的旋转效果是不能实现的，，但是我又想把IE旋转效果跟其他浏览使用CSS3 rotate(deg) 一样。那怎么办呢。我在找了一下，发现IE里面有一款滤镜，可以实现旋转角度。代码如下： filter: progid:DXImageTransform.Microsoft.Matrix(sizingMet

IE浏览器CSS transform旋转属性的演示

younger_z的专栏

07-08

1806

IE浏览器CSS transform旋转属性的演示 body { font-family: "Arial", sans-serif; } #ptOfRef { border: #000 solid 3px; background: #6FF; width: 204px; height: 204px; position: absolute; top: 100

IE下及标准浏览器下的图片旋转（一）——滤镜，CSS3

weixin_30410119的博客

12-03

378

关于图片的旋转，一般来说有3种解决方案：（1）滤镜（2）css3（3）canvas。接下来逐一讲解。为了方便理解，我们主要以90度整倍数讲解，兼顾其他角度。 1.滤镜（IE专属） 1.1旋转滤镜语法如下： filter:progid:DXImageTransform.Microsoft.BasicImage(rot...

在 ie5 中实现抽奖转盘旋转效果