ホームページ > 記事 > ウェブフロントエンド > 特定の角度への div 回転を実現_html/css_WEB-ITnose
特定の角度への div 回転を実現_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-21 09:04:461664ブラウズ
transform:rotate(-5deg);
-ms-transform:rotate(-5deg); /* IE 9 */
-moz-transform:rotate(-5deg); * Firefox */
-webkit-transform:rotate(-5deg); /* Safari および Chrome */
-o-transform:rotate(-5deg); これは可能です。ただし、ie678 とは互換性がありません。
フィルターを追加します: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto Expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M2=0.7 660444431189779)"
まだie の回転で利用可能です。
jquery.rotate.min.js を使用したところ、この js は画像を回転することしかできないことがわかりました。
ie678と互換性のあるdiv回転を実現できる人
皆さんありがとうございます
はい
<!doctype html><html lang="en"><head> <meta charset="UTF-8" /> <title> 页面名称 </title><style type="text/css"> div { width: 300px; height: 200px; background: #f66; filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779); }</style></head><body><div>123</div></body></html> CSS 回転させるだけで、、、、ですjust IE バージョンの表記に注意してください。 。 。
はい、できますが、これを行う限り、ie7 では回転の下の div スタイルは無効になります
aba7b36f87decd50b18c7e3e3c150106
5e81291f8e539c338182c71308229ee5幅: 300px;
高さ: 200px;
背景: #f66;
フィルター: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto Expand', M11=0.7660444431189 777, M12=-0.6427876 096865394 , M21=0.6427876096865398, M22=0.7660444431189779) ;
.aa{height:100px;width:200px;margin:20px auto;border:1px red;}
531ac245ce3e4fe3d50054a55f265927
05f7f515ba7a942e025768e1bdd4f54e
36cc49f0c466276486e50c850b7e4956これは IE ブラウザ バージョン 7.0 に特有のバグのようで、xxxx: (x"a b"); という形式に遭遇した場合、これ以降のスタイル コードは無効になります。
後続のスタイル コードを新しい 080b747a20f9163200dd0a7d304ba388531ac245ce3e4fe3d50054a55f265927 に入れることができます
すごいです
ありがとう、この方法は使いやすいです
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。