CSSのTransform_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSSのTransform_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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="/static/imghwm/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSSのTransform_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSSのTransform_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSSのTransform_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSSのTransform_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSSのTransform_html/css_WEB-ITnose" ></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="/static/imghwm/default1.png"  data-src="http://dl.bizhi.sogou.com/images/2012/03/23/107607.jpg?f=download"  class="lazy" alt="CSSのTransform_html/css_WEB-ITnose" ></body></html>

文法形式:

変換元: [ ] [ | | 上 | 中央 ] || [ 中央 | 中央 ]]

の初期値は 50%、 Block 要素および inline 要素とともに使用されます。 transform-origin は 2 つのパラメータを受け入れます。これらのパラメータは、パーセンテージ、em、px などの特定の値、または left、center、right、または top、middle、bottom などの説明的なキーワードにすることができます。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。