CSSスタイル変更——2 D変換
2460 ワード
###前文では、CSSスタイルの変更におけるトリミング、Z-Index、要素の消去、変更の特性に関する基本的な知識について説明します.この記事では、CSSスタイルの変更における2 D変換の基本的な使い方を紹介します.
###2 D変換1).エレメントシフトtranslate(左、上端)
2).エレメント回転rotate(角度)
3).要素スケールscale(幅倍数、高さ倍数)
4).要素反転所与の角度skew(x,y)
5).前のすべてのメソッドをmatrix()に組み合わせる
6).2 D過剰から3 D
参考ドキュメント:W 3 C公式ドキュメント(CSS編)
###この記事をまとめて、CSSスタイル変更編の2 D変換の基本設定を紹介しました.もっと勉強したいなら、Python爬虫類とデータマイニング専用サイトに行ってください.http://pdcfighting.com/Pythonネットワークの爬虫類とデータマイニングの知識をもっと学びたいなら、専門サイトに行くことができます.http://pdcfighting.com/
###2 D変換1).エレメントシフトtranslate(左、上端)
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px); /* Opera */
-moz-transform: translate(50px,100px); /* Firefox */
}
2).エレメント回転rotate(角度)
div
{
transform: rotate(10deg);
-ms-transform: rotate(10deg); /* IE 9 */
-webkit-transform: rotate(10deg); /* Safari and Chrome */
-o-transform: rotate(10deg); /* Opera */
-moz-transform: rotate(10deg); /* Firefox */
}
rotate()
scale()
skew()
matrix()
3).要素スケールscale(幅倍数、高さ倍数)
div
{
transform: scale(1,2);
-ms-transform: scale(1,2); /* IE 9 */
-webkit-transform: scale(1,2); /* Safari Chrome */
-o-transform: scale(1,2); /* Opera */
-moz-transform: scale(1,2); /* Firefox */
}
4).要素反転所与の角度skew(x,y)
div
{
transform: skew(13deg,21deg);
-ms-transform: skew(13deg,21deg); /* IE 9 */
-webkit-transform: skew(13deg,21deg); /* Safari and Chrome */
-o-transform: skew(13deg,21deg); /* Opera */
-moz-transform: skew(13deg,21deg); /* Firefox */
}
5).前のすべてのメソッドをmatrix()に組み合わせる
div
{
transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65);
-ms-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* IE 9 */
-moz-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* Firefox */
-webkit-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* Safari and Chrome */
-o-transform:matrix(1.3,0.32,1.32,0.22,0.54,0.65); /* Opera */
}
6
6).2 D過剰から3 D
div{
transform:rotate(1deg);
-ms-transform:rotate(1deg); /* IE 9 */
-moz-transform:rotate(1deg); /* Firefox */
-webkit-transform:rotate(1deg); /* Safari Chrome */
-o-transform:rotate(1deg); /* Opera */
}
2D 3D , x,y , :
rotate(angle) 2D , 。
rotate3d(x,y,z,angle) 3D
rotateX(angle) X 3D
rotateY(angle) Y 3D
rotateZ(angle) Z 3D
, :
perspective(n) 3D 。
参考ドキュメント:W 3 C公式ドキュメント(CSS編)
###この記事をまとめて、CSSスタイル変更編の2 D変換の基本設定を紹介しました.もっと勉強したいなら、Python爬虫類とデータマイニング専用サイトに行ってください.http://pdcfighting.com/Pythonネットワークの爬虫類とデータマイニングの知識をもっと学びたいなら、専門サイトに行くことができます.http://pdcfighting.com/