最近の HTML5 と CSS3 の開発スピードは依然として非常に目覚ましく、最新のテクノロジーを使用した大きくてクールな Web サイトが国内外にたくさんあります。新しい技術を前に、それをどのように正しく把握し、今後の実際のプロジェクトに活用していくべきなのでしょうか。この問題に対応して、Haozi 氏は CSS3 を分析し、CSS3 がどのような魔法のものであるかを生徒たちに 1 つずつ説明することにしました。 変換だけ始めましょう。うまく書けない場合は、ぜひ試してみてください。 !
transform の意味は次のとおりです: 変更、変形
transform のプロパティには、rotate() / skew() /scale() / Translation(,) が含まれます。これらはそれぞれ x と y に分割されます (rotatex() やrotatey() など)。
各属性の使用法を詳しく見てみましょう:
意味: 回転; ここで、「deg」は「度」を意味します。たとえば、「10deg」は「10 度」を意味します。以下同様です。
. demo_transform1 { -webkit-transform : rotate (10deg ) ; -moz-transform : rotate (10deg ) }ログイン後にコピー
意味:
変換:scale(): 意味: 比率「1.5」 「」は1.5倍に拡大することを意味します。2倍に拡大したい場合は「2.0」、縮小したい場合はマイナスの「-」と書きます。 りー. demo_transform2 { -webkit-transform : skew (20deg ) ; -moz-transform : skew (20deg ) }ログイン後にコピー
含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。
. demo_transform4 { -webkit-transform : translate (120px , 0 ) ; -moz-transform : translate (120px , 0 ) }ログイン後にコピー
transform的常用属性就是这些了,下面我们借助transition的帮忙来演示一个关于css3 transform的综合实例:
. demo_transform5 { -webkit-transition : all 1s ease-in-out ; -moz-transition : all 1s ease-in-out } . demo_transform5 : hover { -webkit-transform : rotate (360deg ) skew (-20deg ) scale (3 . 0 ) translate (100px , 0 ) ; -moz-transform : rotate (360deg ) skew (-20deg ) scale (3 . 0 ) translate (100px , 0 ) }ログイン後にコピー
以上がCSS3 での変換の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。