Home > Article > Web Front-end > How to rotate this triangle in css3_html/css_WEB-ITnose
How to rotate this triangle in css3_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:24:411513browse
<!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> 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.