洞头公司网站建设：如何启用CSS变换IE6-8(快速提示)

现代浏览器的支持对于大多数CSS3属性。 你可以申请 CSS动画 轻松,转换和梯度等。 然而,仍然有很多用户的旧版本ie版本 并不完全支持新的CSS3属性 。 在这篇文章中,我将分享小贴士 如何启用IE6-8 CSS转换吗 。

CSS转换属性允许我们洞头公司网站建设改变一个元素在二维或三维空间 。 你可以翻译,规模、旋转和倾斜一个元素使用CSS变换。 现代浏览器,如Firefox、Opera和基于Webkit的浏览器支持特定于供应商的前缀(使用CSS转换 -moz-transform , -o-transform 和 -webkit-transform 分别),但你不会找到它在Internet Explorer。 所以在此,我将使用javascript库 cssSandpaper 允许跨浏览器CSS转换,甚至在旧IE。

推荐阅读: 一个调查:Cubic-Bezier CSS3转换

开始

首先,下载 cssSandpaper 从 Github库 。 然后,包括下列要求附带cssSandpaper JavaScript库。

的 -sand-transform 财产

cssSandpaper 引入了一个新的前缀属性应用转换 。 可以使用这个新属性与其他浏览器前缀 -moz-transform , -webkit-transform 或其他浏览器前缀的属性,像这样:

cssSandpaper继承标准CSS功能执行旋转和缩放等变换。 下面列出的函数中可以使用 -sand-transform 财产。

• 旋转(角度) 用于旋转角度或弧度的元素。 例句: -sand-transform:旋转(45度)

• 量表(sx (sy)) 用于一个元素。 例句: -sand-transform:规模(1 [2]) 这意味着我们规模上的元素轴 根据原始大小和 轴 是原来的两倍大小。

• skewX (ax) 和 skewY(是的) 用于倾斜一个元素在指定的x和y轴的角度和弧度。 e。 旅客:skewX(30度)

• 矩阵(a、c、b、d, tx,泰) 是用来制作2 d变换矩阵由指定的六个值。

使用的例子

假设我们洞头公司网站建设建造了一盒使用 < div > 。 现在你想要的盒子 200 px 水平距离其初始位置,同时旋转45度。 您可以使用cssSandpaper为了达到这种效果,如下:

你可以看到下面的演示。 注意,你应该看看它在Internet Explorer 6 - 8。

• 视图演示

• 下载源

结论

这 也许不是最优雅的解决方案 因为我们需要堆栈一些JavaScript库来实现这个简单的效果。 但是如果你的老板或客户坚持使旋转在Internet Explorer 8(无论荒谬的理由),您可以使用 cssSandpaper来实现这一点。