CSS変換の変換

3S:あなたは、トランジショントランジションを設定し、グラフィカルボックスを与えるために、変更の効果を確認したい場合


 

1.変位

構文:変換:(X、Y)の翻訳。

ここで、xは水平方向(左右)の変位を表し、Yは垂直方向(すなわち、垂直)の変位を表します。

ときにのみ、括弧内の2つの値の最大値を有することができ、時間は水平変位の値のみです

値の大きさとすることができるポジティブ、あるいはあってもよい陰性値が負の場合、反対方向に移動されます。

単位値とすることができる画素であってもよい(例えば100pxに、-100px)パーセンテージ( - 50%、例えば50%)。値は、変換位置ボックス要素のサイズを参照して、パーセンテージとして表現されます。

プロパティを翻訳することは的外れではありません!

 

2.回し

構文:変換:回転();

括弧内の回転角度を表し、単位は度使用されなければなりません。

時計回りの回転を示す正の括弧内の値は、ときに、反時計回り、負です。

 

3.回転の原点が設けられています

構文:変換-起源を:XY;

xは、あるいは画素PX;水平方向を表し、方向値は、左の値、中央、右に設定されてもよいパーセント又は%。

Yが又は画素PX;垂直方向を表し、方向値は、値上部、中央、下部に設定されてもよいパーセント又は%。

xまたはyが負の場合、箱の外回転の原点。

回転の起源のデフォルトの場所ボックス中心点:センターセンター。(xとyとの間のスペースで区切られました)。

1  <! - マウスは箱のパスを入力したときに、ホイールは自動的に右に回転させ、マウスのうち、回復ホットウィール- > 
2  < 身体> 
3       < divのクラス=「パス」>  
4          < divのクラス= "ホイール" >ホットウィール</ DIV >  
5      </ DIV > 
6  </ ボディ> 
7  
。8  < スタイル> 
。9  / * スタイル省略した場合にマウスがボックスに設けられたホットホイールスタイルのパス* / 
10      .path :ホバー。ホイール{ 
11          / * )(翻訳水平移動を示す唯一の値であり、上下に移動しません* /
12は         / * 回転セット()は10周3600のための回転の程度を示す* / 
13が         変換翻訳(1000px)回転(3600deg); 
14      } 
15  </ スタイル>

両方が変位しても回転した場合、同じ属性にスペースで区切られた複数の変換を提供しなければならない、別個の2の変換のように書くことができます。

パターンは、2つの別々の言語を重複しますので、ショーは最後の変換定義されました。

 

4.ズーム

構文:変換:スケール(X、Y)。

xは水平方向(パターン変化の幅)を表し、Yは垂直方向(高さ変化パターン)を表します。括弧内の場合にのみ値、同期パターンの幅と高さ変換。

括弧は、正と負の値の数です:(パターンは、変換には影響しません)

  • 値= 0、グラフィックスが消えます。
  • 0 <値<1は、元のパターンを数回に低減されます。
  • 値= 1、同じパターン。
  • 値> 1、元のパターンに拡大し、数回。

 

5.傾斜

構文:変換:スキュー(X、Y)。

xが上下二つのレベル(共通)を維持しながら、左傾斜(左および右)を表します。

yは、右(上下)垂直傾きを表し、双方が垂直のまま残しました。場合のみ、程度の傾斜のデフォルト値。

単位は度であり、傾きを表します。60degとして。

あなたはボックス内に何かをしたい場合は、別正当化するには傾いていない:コンテンツタグ語にして、トランスフォームセット:タグの負の値の親値をスキュー(中)。

(このような表示に必要にまたがるインライン要素としてデジタルコンテンツラベルに追加した場合:ブロックまたは表示:ブロックレベルの要素または要素の行ブロックを変換するためのインラインブロック)

 

ナビゲーションバーケースを傾け:
1  <! - グラフィカル速くロードすることができ、背景画像の代わりに、傾斜- > 
2  < > 
3。     < UL > 
4。         < リチウム> 
5。             < HREF = "#" > 6。< スパン>まず1 </ スパン> 7 </ A > 8 </ > 9 < リチウム> 10 < HREF = "#" > 11 < スパン>まず2 </ スパン
                 
             
         
         
             
                 > 
12              </ A > 
13          </ > 
14          < リチウム> 
15              < HREF = "#" > 16 < スパン>首页3 </ スパン> 17 </ A > 18 </ > 19 < リチウム> 20 < HREF = "#" > 21 < スパン>首页4 </ スパン> 22 </ A >
                 
             
         
         
             
                 
             
23          </ > 
24          < リチウム> 
25              < HREF = "#" > 26 < スパン>首页5 </ スパン> 27 </ A > 28 </ > 29 < リチウム> 30 < HREF = "#" > 31 < スパン>首页6 </ スパン> 32 </ A > 33 </ > 34
                 
             
         
         
             
                 
             
         
     </ のUI > 
35  </ ボディ> 
36  
37  < スタイル> 
38れる     / * CSSスタイルは、ULを省略し、設定ラベル* / 
39      のLi { 
40          フロート; 
41は、         背景ブラック
42である         マージン右20ピクセル
43は         変換しますスキュー(-20deg); 
44である     } 
45      のLi Aスパン{ 
46は         ディスプレイブロック
47          変換スキュー(20deg) 
48      } 
49  </ スタイル>

 

 

6.ボックス中心の概要

使用するためのセンターボックス「子供の父親は、位相なければなりません。」すなわち:

子要素は、設定位置:絶対;親要素設定位置:相対; 次に設定左、上、マージン相当します。

1)左:0。

          右:0;

          トップ:0;

          下:0;

          マージン:自動;

   

2)神経:50%。

          トップ:50%;

          余白左: - 半分その幅。

          マージントップ: - 半分その幅。

   

3)左:50重量%;

          トップ:50%;

          変換:(-50%、-50%)を変換。

 

おすすめ

転載: www.cnblogs.com/cnlisiyiii-stu/p/11626763.html