CSS3 変換attribute_html/css_WEB-ITnose

CSS3 の一部のプロパティは比較的新しい可能性があり、海外から中国への一部の書籍の翻訳時間は 1 ～ 2 年遅れる可能性があります。したがって、時間内に解決しなければならないことがまだいくつかあります。

CSS3 の属性について話しましょう:transform

実際、文字通りの意味は非常に明白で、変更、変更を意味します。

具体的にはどのような変化があるのでしょうか？

Transform は次の値を選択できます:

1. rotate-rotate(rotatex,rotatey)
2. tilt-skew
3. scale-scale
4. move-translate

以下に示す例は、実際には非常に単純かもしれません。結局のところ、W3School をご覧ください。

1.rotate

a.rotate{    -webkit-transform: rotate(10deg);    -ms-transform: rotate(10deg);    -o-transform: rotate(10deg);    transform: rotate(10deg);/*没有火狐的前缀，已经规范了*/}

transform

ここでの 20deg が度を意味することは誰もが知っています。 20deg は 20 度の正の回転です。もちろん、負の回転もあります。以下を参照してください。

変換

. デフォルトの回転中心は、

2.skew

の中点です

変形

20 度のベベルの概念とは何ですか?指で長方形を右から押すと、長方形がゼリーのように傾くとします

3.scale

a.skew{    -webkit-transform: skew(20deg);    -ms-transform: skew(20deg);    -o-transform: skew(20deg);    transform: skew(20deg);/*没有火狐的前缀，已经规范了*/}

変形

元のものは次のようになります。ズームインせずに以下に続きます:

transform

4.translate

a.scale{    -webkit-transform: scale(1.5);    -ms-transform: scale(1.5);    -o-transform: scale(1.5);    transform: scale(1.5);/*没有火狐的前缀，已经规范了*/}

transform

オリジナルのものは移動していない場合はこのようになっています。

変換

5. 包括的な変換

a.translate{    -webkit-transform: translate(250px,10px);    -ms-transform: translate(250px,10px);    -o-transform: translate(250px,10px);    transform: translate(250px,10px);/*没有火狐的前缀，已经规范了*/}

変換

マウスを置くと理解できます

私の要約は非常に水っぽいと感じますが、それでも読みやすく学習しやすいです