css3 这个三角怎么旋转_html/css_WEB-ITnose-html教學-PHP中文網

回复讨论(解决方案)

首頁

web前端

html教學

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:24 PM

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

登入後複製

回复讨论(解决方案)

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度。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn