CSS3 での変換の詳細な紹介

黄舟
リリース: 2017-10-24 10:33:48
オリジナル
1836 人が閲覧しました

最近の HTML5 と CSS3 の開発スピードは依然として非常に目覚ましく、最新のテクノロジーを使用した大きくてクールな Web サイトが国内外にたくさんあります。新しい技術を前に、それをどのように正しく把握し、今後の実際のプロジェクトに活用していくべきなのでしょうか。この問題に対応して、Haozi 氏は CSS3 を分析し、CSS3 がどのような魔法のものであるかを生徒たちに 1 つずつ説明することにしました。 変換だけ始めましょう。うまく書けない場合は、ぜひ試してみてください。 !

CSS3変換とは何ですか?

transform の意味は次のとおりです: 変更、変形

CSS3 変換の共通プロパティは何ですか?

transform のプロパティには、rotate() / skew() /scale() / Translation(,) が含まれます。これらはそれぞれ x と y に分割されます (rotatex() やrotatey() など)。

各属性の使用法を詳しく見てみましょう:

transform:rotate():

意味: 回転; ここで、「deg」は「度」を意味します。たとえば、「10deg」は「10 度」を意味します。以下同様です。

.
demo_transform1
{
-webkit-transform
:
rotate
(10deg
)
;
-moz-transform
:
rotate
(10deg
)
}
ログイン後にコピー


transform:skew():

意味:

.
demo_transform2
{
-webkit-transform
:
skew
(20deg
)
;
-moz-transform
:
skew
(20deg
)
}
ログイン後にコピー


変換:scale():

意味: 比率「1.5」 「」は1.5倍に拡大することを意味します。2倍に拡大したい場合は「2.0」、縮小したい場合はマイナスの「-」と書きます。

りー


transform:translate():

含义:变动,位移;如下表示向右位移120像素,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

.
demo_transform4
{
-webkit-transform
:
translate
(120px
,
0
)
;
-moz-transform
:
translate
(120px
,
0
)
}
ログイン後にコピー


transform综合:

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート