开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

ie9变换:rotate()在ie9中不起作用

在IE9中，transform属性的rotate()函数不起作用。这是因为IE9不支持CSS3的transform属性。transform属性用于对元素进行旋转、缩放、倾斜或平移等变换操作。rotate()函数是其中的一种变换操作，用于对元素进行旋转。

然而，虽然IE9不支持transform属性的rotate()函数，但可以通过其他方式实现元素的旋转效果。一种常见的方法是使用IE9支持的滤镜效果（filter）。通过设置filter属性的值为"progid:DXImageTransform.Microsoft.Matrix"，可以在IE9中实现元素的旋转效果。

以下是一个示例代码，演示如何在IE9中实现元素的旋转效果：

<!DOCTYPE html>
<html>
<head>
<style>
    .rotate {
        width: 100px;
        height: 100px;
        background-color: red;
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9848077530122081, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.9848077530122081, SizingMethod='auto expand');
    }
</style>
</head>
<body>
    <div class="rotate"></div>
</body>
</html>

在上述代码中，我们创建了一个宽高为100px的红色方块，并通过设置filter属性的值来实现旋转效果。其中，M11、M12、M21、M22分别表示旋转矩阵的四个参数，可以根据需要调整这些参数来实现不同的旋转角度。

需要注意的是，虽然通过滤镜效果可以在IE9中实现元素的旋转效果，但滤镜效果的性能较低，且语法较为复杂。因此，在现代的Web开发中，推荐使用更先进的浏览器，如Chrome、Firefox等，以获得更好的用户体验和开发效率。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc
腾讯云物联网平台（TIoT）：https://cloud.tencent.com/product/tiot
腾讯云移动开发平台（MTP）：https://cloud.tencent.com/product/mtp

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

解决FCKeditor在IE9下弹出层兼容问题

在IE9下，FCKeditor的弹出浮动层会出现兼容bug，下面提供一个解决方法：打开下面这个文件 fckeditor/editor/js/fckeditorcode_ie.js 找到第 38行的这个方法

3761 0

td在relative模式下，IE9不显示border,chrome正常显示边框

在IE9的 F12调试中，明明td有1个像素的边框，偏偏不显示。最后用bing搜索，找到老外的帖子。就立马解决问题。这让我感觉像是，一般医生折腾也看不好病，好医生总能一语中的。... position:relative; } /*第一个老外说这样，立马有边框*/ .thisTd { z-index=-1; position:relative; } 但这样，td是显示在table

8541 0

IE9中一个很恶心的JS错误提示

发现怎么都不能点击，在“开发人员工具中提示”：SCRIPT5007: 属性“aa”的值为 null、未定义或不是 Function 对象 ?

1.7K2 0

移动端样式问题汇总

）; -webkit-appearance：无； } 3，css画箭头 .arrow-right { 宽度：12px；高度：12px；边框底部：1px实心＃999; 右边框：1px实线＃999; 变换...：rotate（-45deg）; } 4，超过1行/ 2行显示省略号 .line-1 { 宽度：100px；空白：nowrap; 溢出：隐藏；文字溢出：省略号； } .line-2 { 宽度：100px...2; //控制多行的行数 -webkit-box-orient：垂直; } 5，水平/垂直居中定位 //绝对定位未知高度，距顶部，左边50％，然后转换：translate（-50％，-50％），不支持IE9...moz-placeholder {} / * Firefox版本19+ * / ：-ms-input-placeholder {} / * IE浏览器* / //冒号前写input或textarea等元素 // IE9

8642 0

为什么 strace 在 Docker 中不起作用？

在编辑“容器如何工作”爱好者杂志的能力页面时，我想试着解释一下为什么 strace 在 Docker 容器中无法工作。...原因 1：在实验中，作为一个普通用户，我可以对我的用户运行的任何进程进行 strace。...容器进程是否在不同的用户命名空间中？嗯，在容器中： root@e27f594da870:/# ls /proc/$$/ns/user -l ......这很容易解释为什么 strace 在 Docker 容器中不能工作 —— 如果 ptrace 系统调用完全被屏蔽了，那么你当然不能调用它，strace 就会失败。...在 containerd 的 seccomp 实现中，在 contrib/seccomp/seccomp/seccomp_default.go 中，有一堆代码来确保如果一个进程有一个能力，那么它也会（通过

6.4K3 0

在bootstrap中col-md-offset-* 偏移不起作用

在bootstrap中，使用col-md-offset-1、col-md-offset-2、col-md-offset-3、col-md-offset-4等来设置偏移量很常见，但最近就遇到一个问题了，在最新版的...bootstrap4.5中，这个值不起作用了。...后来翻看Bootstrap的官方文档才明白，原来在bootstrap4以后，定义已经发生了变化，我们不需要前缀col-，只是偏移-md-3 这样的写法，也就是不要col-开头了，而是offset-md-

12.6K2 0

Web页面中5种超酷的Hover效果

(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); } 查看Demo 淡入和倒影 ?...这个效果是相对复杂的效果，首先，设置减少图片的初始的透明度，当hover时，把透明度设置回默认值，另外会有一个图片边缘发光的效果和倒影效果（只在以Webkit为内核的浏览器中起作用）。...0px 0px 20px rgba(255,255,255,0.8); } 查看Demo 总结经过测试，这些效果在以Webkit为核心的浏览器上表现最出色，Mozilla次之，IE最差，如果要使得在IE9...编注以上的五种CSS Hover效果都应用了最新的CSS3效果，在现代的浏览器中，应用这些CSS能展现出非常漂亮的效果。...值得一提的是IE9，IE9不支持transition和transform这两种效果，使得这五种效果在IE9下表现的不佳，寄希望于IE10吧。

1.7K10 0

Bootstrap 43 页面基础模板与兼容旧版本浏览器

-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 --> <!...---- 如何兼容上面已经说了引用 html5shiv和 Respond.js 文件，用以支持 IE9 及以下的浏览器。...细心的朋友可能发现，在示例模板中，Bootstrap 4没有兼容性文件，而 Bootstrap 3中，有 html5shiv.js 和 respond.js。...↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ 这是因为Bootstrap 4放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上以及 iOS 7 以上版本的浏览器。...具体怎么用，请点击 https://blog.csdn.net/bluefish_flying/article/details/72594152 html5shiv.js 和 respond.js 引入不起作用解决

2.5K3 0

【基础系列】CSS专题

*/ } HTML代码：效果： 1.1.1.2 兼容性绿色即是可支持版本 1.2 变形(transform) 在CSS3中transform主要包括以下几种：...|matrix; none:表示不进么变换；表示一个或多个变换函数，以空格分开；换句话说就是我们同时对一个元素进行transform的多种属性操作，例如rotate、scale、translate... //Opera -o-transform:rotate | scale | skew | translate ; //IE9 -ms-transform:rotate | scale | skew...变换，相当于直接应用一个[a b c d e f]变换矩阵。...在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

2592 0

给图片或文字加上鼠标悬浮时旋转动画

首先用到 transform 属性，具体代码如下： transform:rotate(360deg); -ms-transform:rotate(360deg); /* IE 9 */ -moz-transform...:rotate(360deg); /* Firefox */ -webkit-transform:rotate(360deg); /* Safari 和 Chrome */ -o-transform:...rotate(360deg); /* Opera */ 其中 -ms-transform 支持IE9浏览器，-moz-transform 支持火狐浏览器，-webkit-transform 支持苹果浏览器和谷歌浏览器...-ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg...); -ms-transform:rotate(360deg); -moz-transform:rotate(360deg); -webkit-transform:rotate(360deg)

2.3K3 0

在图像的傅里叶变换中,什么是基本图像_傅立叶变换

因为不仅傅立叶分析涉及图像处理的很多方面，傅立叶的改进算法，比如离散余弦变换，gabor与小波在图像处理中也有重要的分量。...印象中，傅立叶变换在图像处理以下几个话题都有重要作用： 1.图像增强与图像去噪绝大部分噪音都是图像的高频分量，通过低通滤波器来滤除高频——噪声; 边缘也是图像的高频分量，可以通过添加高频分量来增强原始图像的边缘...在图像处理中，频域反应了图像在空域灰度变化剧烈程度，也就是图像灰度的变化速度，也就是图像的梯度大小。...图像傅立叶变换的物理意义图像的频率是表征图像中灰度变化剧烈程度的指标，是灰度在平面空间上的梯度。...如：大面积的沙漠在图像中是一片灰度变化缓慢的区域，对应的频率值很低；而对于地表属性变换剧烈的边缘区域在图像中是一片灰度变化剧烈的区域，对应的频率值较高。

1.4K1 0

List.append() 在 Python 中不起作用，该怎么解决？

在 Python 中，我们通常使用 List.append() 方法向列表末尾添加元素。然而，在某些情况下，你可能会遇到 List.append() 方法不起作用的问题。...问题描述虽然 List.append() 方法通常在 Python 中运行良好，但在某些情况下，它可能无法正常工作。以下是一些可能导致 List.append() 方法不起作用的情况：1....变量重新赋值在 Python 中，列表是可变对象，也就是说，它们可以通过引用进行修改。...列表作为函数参数另一个导致 List.append() 方法不起作用的常见情况是将列表作为函数的参数传递。在 Python 中，函数参数传递是通过对象引用实现的。...结论List.append() 方法在 Python 中通常是一个方便且常用的方法，用于向列表末尾添加元素。然而，当遇到某些情况时，它可能不起作用。

2.7K2 0

css+div知识温馨

-150px; margin-top:-100px; } 对于区块元素都定义display:inline IE里显示的是漂浮状态，火狐里根本就不显示任何东西对于IE 漂浮不漂浮是在同一个文档流下...，而火狐是显示的不同文档流让所有区块都漂浮就可以解决这两个兼容问题（IE9已经解决以上问题） line-height 属性：对文字可以设置水平居中，却无法实现垂直居中，如果希望文字垂直居中...relative ,position:absolute可以自动激活z-index , 如果没有定义position:relative ,position:absolute 及时添加了z-index属性也不起作用...的父元素的位置关于z-index z-index为负值的时候，javascript将不起作用 一个站点的css结构建议采用 base.css+common.css+page.css...的模式其中base.css 定义CSS reset 以及一些原子类 common.css 可以定义页面的框架 page.css可以定义具体页面中的布局

1.6K2 0

css笔记 - transform学习笔记(二)

当数值在0-1之间的时候，就是缩小。所以放大还是缩小看的是数值的关系，和正负没有关系。数值为0就是原来的宽高*0时就看不见了。数值为1是放大，但是是宽高*1，和没乘一样。还和原来一边大。...D name 含义中心点备注 2 rotate(angle) 旋转默认中心点就是盒模型的中心点 angle值 3D rotate3d(x,y,z,angle) N°旋转同上 3D rotateX...轴的值位移同上 2 translateY(y) 只是用 Y 轴的值位移同上 3D translateZ(z) 只是用 Z 轴的值位移同上括号里边，数值后边一定要有单位值，如果没有单位值不起作用...x-axis 定义该视图在x轴上的位置、 y-axis 定义该视图在y轴上的位置 perspective-visibility 定义元素在不面对屏幕时是否可见混合写法多个属性值之间用逗号隔开即可。...- ie9加前缀-ms- 前缀 transform: ; -moz-transform: ; -webkit-transform: ; -ms-transform: ; -o-transform

1.7K1 0

【前端面试题】04—33道基础CSS3面试题(附答案)

CSS3的新特征如下：圆角（ border- radius）；阴影（box- shadow）；对文字加特效（text- shadow）；线性渐变（ gradient）；变换（ transform...Android系统中，有时会有莫名其妙的Bug，建议慎重使用。...forwards，当动画完成后，保持最后一个属性值（在最后一个关键帧中定义） backwards，在 animation-delay所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义...div{ transform:rotate（30deg）； -ms-transfornm:rotate （30deg）；/*IE9*/ -webkit-transform:rotate（30deg）；.../* Safar1和 Chrome*/ -o-transform:rotate（30deg）；/* opera*/ -moz-transform:rotate（30deg）；/*Firefox*/ 20

2.8K1 0

CSS兼容性的一些Hack方法

举例如下只在IE下生效这段文字只在IE浏览器显示只在IE6下生效这段文字只在IE6浏览器显示只在IE6以上版本生效 <!...important;color:green; 棕色 N N Y N Y N Y N Y Y 说明：在标准模式中 “-″减号是IE6专有的hack “\9″ IE6/IE7/IE8/IE9/IE10都生效...UserAgent）为：Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)，所以我们可以使用javascript将此属性添加到文档标签中，...比如由于IE8及以下版本不支持CSS3,而我们的项目页面使用了大量CSS3新属性在IE9/Firefox/Chrome下正常渲染，这种情况下如果不使用css3pie或htc或条件注释等方法时,可能就得让

1.2K3 0

微软：IE9可实现Web页面所有内容硬件加速

在7月发布的平台预览第三版中，IE9引入了硬件加速HTML5 canvas。...IE9硬件加速浏览器可以使用硬件来加速一个HTML页面所有步骤中的一些或是全部，下图中就描述了IE9中的HTML页面渲染主要步骤： IE9页面渲染共分为三大阶段：内容渲染：IE9在第一个阶段使用Direct2D...和DirectWrite子系统内容渲染的硬件加速；页面生成：IE9在这个阶段使用Direct3D加速页面绘制，在渲染图片密集型任务时为IE提供优异的性能；桌面生成：在浏览器完成内容渲染并生成页面后，...完整硬件加速VS.部分硬件加速在IE9中，开发人员能够使用完整的硬件加速。...当你使用其它支持硬件加速的浏览器测试IE Test Drive网站上的项目时，你会发现其性能在某些方面能与IE9不分上下，但是在很多方面相差甚多。这种差距就反应了完整硬件加速和部分硬件加速之间的区别。

8282 0

html设置ie9兼容性视图,ie9兼容性设置在哪里 IE兼容性视图在哪里设置？「建议收藏」

IE兼容性视图在IE浏览器的工具栏的“兼容性视图设置”里设置。...：在操作系统桌面上，点击IE浏览器图标进入。...在IE浏览器主界面，点击菜单栏上的工具菜单。弹出的工具菜单选项，点击选择兼容性视图设置进入。...相应代码如下：针对 IE8、IE9 分别禁用兼容模式 IE9兼容性视图的设置，选工具，看不到“兼容性视图”IE9右上角的齿轮点一下，internet选项高级重置，勾选删除个性化设置，然后重新开IE9...另外可以通过打开网站后按F12选择浏览模式来达到兼容的目的 IE9如何显示菜单栏，设置兼容模式ie9不像ie8可以点击设置添加兼容模式，ie9打开ie后按alt,然后在右上角会出现菜单栏，点击工具兼容性设置即可

2.2K2 0

Bootstrap将放弃对IE9的支持

第一个alpha就已经移除了对IE8的支持，而此次的alpha版将移除对IE9的支持，并将Flexbox作为默认的布局系统。...移除对IE9的支持，并在升级过程中会加以说明。移除已编译的flexbox CSS绑定。在入门指南部分移除了flexbox.md。...` `我个人认为没有必要再支持IE9了，应该让用户去升级他们的浏览器。` `IE9不支持Flexbox，所以我们已经在所有新项目里不再考虑IE9了。...` `IE9已经是5年前的旧浏览器了，放弃它吧。如果有人真的需要支持IE9，那么就让他们用Bootstrap 3。我很喜欢Flexbox，特别是它支持RTL，还有它的垂直对齐。...` `微软都不再支持IE9了，其他人又何必多此一举呢！` `有些政府网站只有1%的会话是来自IE9的，而且一直在下降。` 对于移除对IE9支持的呼声几乎是一边倒。

1.6K7 0

IE9平台预览版发布

微软最近在Mix 2010大会上公开发布了IE9的平台预览版（IE9 Mix 2010 Platform Preview 1.9.7745.6019）。...通过微软提供的此Windows IE平台，我们可以预览IE9的新性能。不过微软表示这只是一个初期预览版本，很多功能还没有完成，也有可能在今后进行更改。...在IE9中微软将加入HTML5支持以及GPU加速能力，更好的为用户提供上网体验。...想要抢先体验IE9，需要以下条件： — 操作系统：Windows 7、Windows Vista SP2； — 系统必须安装IE8和DirectX 2D。...根据上面微软给出的数据，IE9预览版相对于IE8还是有一定的进步。但毕竟还只是preview，Acid3得分依旧很低。

2633 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭