CSS3 での変換の詳細な紹介

最近の 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
)
}

ログイン後にコピー

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