css3_html/css_WEB-ITnose でこの三角形を回転させる方法-htmlチュートリアル-php.cn

css3_html/css_WEB-ITnose でこの三角形を回転させる方法

WBOY

リリース： 2016-06-24 12:24:41

オリジナル

1534 人が閲覧しました

<!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: 回転(7.5deg) /* FF3.5+ */
-o-transform: 回転(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='自動展開');
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.9914,M12=-0.1305,M21=0.1305,M22=0.9914,SizingMethod='自動展開') )"; /* IE8 */
}
IE を除く他のブラウザは、オブジェクトを回転するために回転関数を使用します。たとえば、rotate(7.5deg) は時計回りに 7.5 度回転することを意味します。
IE は複雑なフィルター DXImageTransform.Microsoft.Matrix を使用する必要があります。合計 5 つのパラメーターを受け入れます。最初の 4 つのパラメーターは、それ自体で三角関数を計算し、M11 = cos(回転)、M12 = -sin(回転)、M21 = sin(回転)、M22 = として書き込む必要があります。 cos(rotation)、回転は時計回りに 7.5 度回転した場合の回転角度を表し、5 番目のパラメータ SizingMethod は再描画方法を表し、「auto Expand」は新しい境界への自動拡張を表します。
このフィルターに加えて、IE にはもう少し単純なフィルター DXImageTransform.Microsoft.BasicImage(rotation=x) もあります。 x の値は 1、2、3、0 のみです。これは、それぞれ時計回りに 90 度、180 度、270 度、360 度を選択することを意味します。