css 禁用和启用_如何在IE6-8中启用CSS转换[快速提示]

现代浏览器对大多数CSS3属性都有很多支持。 实际上，您可以轻松地应用CSS动画 ，转换和渐变。 但是，仍然有许多旧版本的Internet Explorer用户不完全支持较新CSS3属性 。 在本文中，我将分享如何在IE6-8上启用CSS转换的快速提示。

CSS Transform属性允许我们在二维或三维空间中转换元素 。 您可以使用CSS Transform转换，缩放，旋转和倾斜元素。 对于诸如Firefox，Opera和基于Webkit的现代浏览器，基于浏览器的供应商特定前缀（分别使用-moz-transform ， -o-transform和-webkit-transform ）支持CSS Transform，但在Internet Explorer上找不到它。 因此，在这里，我将使用名为cssSandpaper的 JavaScript库，即使在旧版IE中，该库也允许跨浏览器CSS转换。

入门

首先，从Github存储库下载cssSandpaper 。 然后，包括cssSandpaper随附的以下必需JavaScript库。

<script type="text/javascript" src="/path/to/js/EventHelpers.js"></script>
<script type="text/javascript" src="/path/to/js/cssQuery-p.js"></script>
<script type="text/javascript" src="/path/to/js/jcoglan.com/sylvester.js"></script>
<script type="text/javascript" src="/path/to/js/cssSandpaper.js"></script>

cssSandpaper 引入了一个新的带前缀的属性来应用转换 。 此新属性可以与其他浏览器供应商前缀（例如-moz-transform ， -webkit-transform ）或其他浏览器前缀的属性结合使用，如下所示：

#container {
	-moz-transform: <function-list>;
	-webkit-transfrom: <function-list>;
	-sand-transform: <function-list>;
	transform: <function-list>;
}

cssSandpaper继承了标准CSS函数以执行转换，例如旋转和缩放。 以下是可以在-sand-transform属性中使用的功能的列表。

• rotation（angle）用于以度或弧度旋转元素。 例如： -sand-transform: rotate(45deg)
• scale（sx [，sy]）用于缩放元素。 例如： -sand-transform: scale(1[,2])这意味着我们根据原始大小在X轴上缩放元素，而在Y轴上将元素缩放为原始大小的两倍。
• skewX（ax）和skewY（ay）用于将元素绕x和y轴倾斜指定角度（以度或弧度为单位）。 例如：skewX（30deg）
• matrix（a，c，b，d，tx，ty）用于制作由指定的六个值组成的2D变换矩阵。

使用范例

假设我们使用<div>构建了一个盒子。 现在，您希望框从其初始位置水平移动200px ，同时将其旋转45度。 您可以使用cssSandpaper达到此效果，如下所示：

#box{
	width: 150px;
	height: 100px;
	-sand-transform:  translate(200px, 0) rotate(45deg);
}

您可以在下面查看演示。 请注意，您也应该在Internet Explorer 6-8中查看它。

• 观看演示
• 下载源

结论

这可能不是最优雅的解决方案，因为我们需要堆叠一堆JavaScript库来实现这种简单效果。 但是，如果老板或客户坚持要在Internet Explorer 8中启用轮换功能（出于任何荒谬的原因），则可以使用cssSandpaper来实现。

翻译自: https://www.hongkiat.com/blog/css-transform-ie/