How to rotate this triangle in css3_html/css_WEB-ITnose-HTML Tutorial-php.cn

How to rotate this triangle in css3_html/css_WEB-ITnose

WBOY

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

Original

1534 people have browsed it

<!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>

Copy after login

Reply to discussion (solution)

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 */
}
Except for IE, other browsers use rotate Function to realize the rotation of an object. For example, rotate(7.5deg) means rotating 7.5 degrees clockwise.
IE needs to use a complex filter DXImageTransform.Microsoft.Matrix. It accepts a total of five parameters. The first four parameters need to calculate the trigonometric functions by themselves, and then write them as M11 = cos(rotation), M12 = -sin(rotation), M21 = sin(rotation), M22 = cos(rotation), where The rotation represents the rotation angle. If it is rotated 7.5 degrees clockwise, the rotation is 7.5; the fifth parameter SizingMethod represents the redrawing method, and 'auto expand' represents automatic expansion to new boundaries.
In addition to this filter, IE also has a slightly simpler filter DXImageTransform.Microsoft.BasicImage(rotation=x). The value of x can only be 1, 2, 3, 0, which means selecting 90 degrees, 180 degrees, 270 degrees and 360 degrees clockwise respectively.