css3 这个三角怎么旋转_html/css_WEB-ITnose-HTML-Tutorial-php.cn

css3 这个三角怎么旋转_html/css_WEB-ITnose

WBOY

Freigeben： 2016-06-24 12:24:41

Original

1533 Leute haben es durchsucht

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>*{	margin:0;	padding:0;	}body{	font-size:12px;	}.div{	border:1px solid #AAAAAA;	width:440px;	height:220px;	}.div .div1 {    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #AAAAAA;    border-style: dashed dashed solid;    border-width: 0 10px 10px;    display: block;    font-size: 0;    height: 0;    left: 0;    line-height: 0;    margin-left: -10px;    position: absolute;    top: 50%;    width: 0;    z-index: 100;}.div2:after {    clear: both;    content: ".";    display: block;    height: 0;    visibility: hidden;}.div .div1 .div2 {    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #FFFFFF;    border-style: dashed dashed solid;    border-width: 0 10px 10px;    display: block;    font-size: 0;    height: 0;    left: -10px;    line-height: 0;    position: absolute;    top: 1px;    width: 0;}</style></head><body><div class="div" style="position: absolute; z-index: 9999;  left: 530px; top: 30px; "><span class="div1"><span class="div2"></span></span></div></body></html>

Nach dem Login kopieren

回复讨论(解决方案)

box_rotate {
-moz-transform: rotate(7.5deg); /* FF3.5+ */
-o-transform: rotate(7.5deg); /* Opera 10.5 */
-webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=’auto expand’);
-ms-filter: “progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod=’auto expand’)”; /* IE8 */
}
除了IE以外，其他浏览器都是用rotate函数，实现某个对象的旋转。比如rotate(7.5deg)就表示顺时针旋转7.5度（degree）。
IE则需要用到一个复杂的滤镜DXImageTransform.Microsoft.Matrix。它一共接受五个参数，前四个参数需要自行计算三角函数，然后分别写成M11 = cos(rotation),M12 = -sin(rotation),M21 = sin(rotation),M22 = cos(rotation)，其中的rotation表示旋转角度，如果顺时针旋转7.5度，则rotation就为7.5；第五个参数SizingMethod表示重绘方式，’auto expand’代表自动扩展到新的边界。
除了这个滤镜，IE还有一个稍微简单一点的滤镜DXImageTransform.Microsoft.BasicImage(rotation=x)。其中的x只能取值为1，2，3，0，分别表示顺时针选择90度、180度、270度和360度。