CSSのTransform_html/css_WEB-ITnose
Jun 21, 2016 am 08:47 AM
テキストや画像の回転、拡大縮小、傾き、移動の 4 種類の変形処理を実現するには、CSS3 のトランスフォームを使用します。
この記事では標準の変換を使用していますが、各ブラウザの対応するプライベート属性を使用することもできます。対応関係は次のとおりです
- -webkit-transform
- -moz-transform
- -o-transform
ただし、私の場合コンピュータ 変換を使用した場合の効果は同じです。Chrome 49 Firefox 46 IE 10
1. Rotate (回転)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: rotate(90deg); } </style></head><body> <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"></body></html>
構文形式は次のとおりです:
rotate(angle)
回転角度の単位は次のとおりです:
- deg は角度システムを指し、1 つの円内の角度は 360°、直角は 90°
- grad は 100 分の 1 単位系を指し、1 つの円の角度は 400 、直角は 100 です
- turn 、1turn は 1 回転を表します
- rad はラジアン系を指します、 1 つの円の角度は 2π、直角は π/2
換算 比率は次のとおりです: 90deg = 100grad = 0.25turn ≈ 1.570796326794897rad
2. )
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: scale(1,-1) } </style></head><body> <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"></body></html>
構文形式は次のとおりです:
scale(number,[number2] )
number2 はオプションであり、そうでない場合はデフォルトの数値と同じになります。セット。数値には、正、負、または 10 進数を指定できます。
数値を正負の符号 (+、-) と数値 (数値の絶対値) の 2 つの部分に分けます。負の符号 (-) は、値が 1 より大きい場合は拡大され、1 に等しい場合は縮小されません。拡大も縮小もゼロの場合は消えます。
3. 移動 (翻訳)
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: translate(2in,5cm) } </style></head><body> <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"></body></html>
構文形式は次のとおりです。
translation(value1,[value2])
パラメータは、元の位置を基準とした X 軸のオフセット距離を表します。2 番目のパラメータを省略した場合、デフォルトは 0 になります。正の数値は右と下にオフセットされ、負の数値は左と上にオフセットされます。
距離の単位は次のとおりです:
- 絶対長さの単位
- px
- in
- cm
- mm
- 相対フォント長単位
- em
- rem
- pt
- pc
- ex
- ch
- 視覚領域パーセンテージ長単位
- vw
- vh
- vmin
- vmax
- 奇妙な長さの単位
- % (パーセント)
これらの長さの単位については、次のとおりです。優れた紹介リンク http://www.w3cplus.com/css/the-lengths-of-css.html この段落ではこのリンクも参照していますが、ブラウザのバージョンも常に変更されており、一部の機能が必要であることに注意してください。たとえば、vmax 属性は私の Chrome ブラウザでも正常に動作します。
4. スキュー
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: skew(30deg,-0.1turn) } </style></head><body> <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"></body></html>
文法形式:
skew(angle,[angle])
最初のパラメータは、相対的な傾きを表します。 X 軸、2 番目のパラメータが Y 軸に対して傾いている場合、2 番目のパラメータはデフォルトで 0 になります。
回転関数は回転するだけで要素の形状は変わりませんが、スキュー関数は要素の形状を変更します。
5. 変換
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ transform: matrix(1,0.4,0,1,0,0) } </style></head><body> <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"></body></html>
Matrix() 関数は、古いパラメータを新しいパラメータに変換する 3x3 行列です。
現時点では、これについてはあまり知りません。興味がある方は、ご自身でググってみてください。
6. Transform-origin
デフォルトでは、CSS 変換の原点はオブジェクトの中心点です。この中心点を変更したい場合は、transform-origin 属性を使用します。それを定義します。
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> img:hover{ /*以左上角为原点旋转*/ transform-origin: top left; transform: rotate(30deg); } </style></head><body> <img src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"></body></html>
文法形式:
変換元: [ ] [ | | 上 | 中央 ] || [ 中央 | 中央 ]]
の初期値は 50%、 Block 要素および inline 要素とともに使用されます。 transform-origin は 2 つのパラメータを受け入れます。これらのパラメータは、パーセンテージ、em、px などの特定の値、または left、center、right、または top、middle、bottom などの説明的なキーワードにすることができます。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

&lt; iframe&gt;の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?
