Javascript 在一个角度上绘制CSS

我的CSS如下所示：

.block1 {

 height:20px;
 width:70px;
 background-color:#09F;
 background-repeat:no-repeat;
 position:absolute;

}

---

这将绘制一个矩形。接下来我想画一个角度的矩形，比如45度。我不知道有一个角度选项，我该怎么做呢？

并非所有浏览器都完全支持该选项，但您可以使用CSS旋转

基本上，应用：

-moz-transform:rotate(45deg); /* Firefox */
-webkit-transform:rotate(45deg); /* WebKit (Chrome, Safari) */
-o-transform: rotate(45deg); /* Opera */
-ms-transform:rotate(45deg); /* IE9 */
transform: rotate(45deg); /* No support currently, but hooray future! */

/* Fun IE code (you should probably put this in a separate css file controlled with conditional comments) */
/* IE8+ - must be on one line, unfortunately */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865474, M12=-0.7071067811865477, M21=0.7071067811865477, M22=0.7071067811865474, SizingMethod='auto expand')";  
/* IE6 and 7 */ 
filter: progid:DXImageTransform.Microsoft.Matrix(
         M11=0.7071067811865474,
         M12=-0.7071067811865477,
         M21=0.7071067811865477,
         M22=0.7071067811865474,
         SizingMethod='auto expand');
/* These are necessary for the IE code only */
margin-left: 5px; 
margin-top: -70px;

IE代码由生成，这非常有用。

您应该使用（）和值

旋转（45度）

，并且供应商前缀属性变量：

请参见：

使其在旧版本的IE中正常工作是。。困难

我建议您使用此工具，这使它相对容易：

---

这是matrix的IE版本

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071, M12=-0.7071, M21=0.7071, M22=0.7071, SizingMethod='auto expand');

---

还添加

变换：旋转（45度）（无供应商前缀）。以防有人创建新的布局引擎。
.BasicImage
只能以90度增量旋转，请参见：。另外，
变换：旋转（45度）
应该排在最后，否则“实验性”供应商前缀属性可能会覆盖“finalized”属性。@thirtydot有趣的是，文章将其旋转到1.5；我想可能是一些“未记录”的代码。
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071, M12=-0.7071, M21=0.7071, M22=0.7071, SizingMethod='auto expand');