CSS在角度上绘制
CSS Drawing on an Angle
我的CSS如下所示:
.block1 {
height:20px;
width:70px;
background-color:#09F;
background-repeat:no-repeat;
position:absolute;
}
这将绘制一个矩形。接下来我想在一个角度上画一个矩形,比如45度。我不知道角度选项,我该怎么做?
并非所有浏览器都完全支持它,但您可以使用CSS Rotation。这是一篇关于它的文章。
基本上,应用:
-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代码非常有用。
您应该使用值为rotate(45deg)
的transform
(来自CSS3(,以及以供应商为前缀的属性变体:
请参阅:http://jsfiddle.net/JngyN/
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
让它在旧版本的IE中正常工作是很困难的。
我建议你使用这个工具,它使它相对容易:
http://www.useragentman.com/IETransformsTranslator/index.html
这是矩阵的IE版本
filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.7071, M12=-0.7071, M21=0.7071, M22=0.7071, SizingMethod='auto expand');
相关文章:
- 如何在javascript中在图像上绘制图像(没有CSS和HTML)
- HTML / CSS / JS线条绘制
- 在 JavaScript 运行之前重新绘制 CSS(以显示进度指示器)
- 拆分脚本/CSS 是否会产生更快的执行/绘制时间
- 在画布上绘制CSS转换(缩放、旋转、向左、向右)
- 使用CSS为绘制在画布上的元素设置样式
- CSS by data属性不会刷新/重新绘制
- 如何使用CSS和JavaScript绘制正态分布曲线(Bell曲线)
- 通过CSS/JS/等防止在Google Chrome中重新绘制
- Css块绘制区域
- 使用jquery和CSS绘制十字符号
- 用jquery绘制CSS十字形状
- 使用CSS绘制线条
- 用CSS绘制水容器
- 当JS改变页面高度时,Body背景CSS梯度不会重新绘制
- CSS在角度上绘制
- 什么'这是在HTML5/CSS/Js中绘制水平线和垂直线的最便宜的方法
- 使用CSS绘制轴位置
- 如何使用GWT或HTML + CSS + JavaScript绘制对角线
- 我想绘制图像's的边界时,我的鼠标在它(CSS)