新しいCSS3プロパティと使用

。CSS3？

CSS3は、CSSの最新バージョンです

幅。heith.background.border CSS2.1属し
CSS3は CSS2.1前に内容を保存するが、いくつかの新しい構文を追加します。
CSS3：境界半径：nth-の型（）バックグラウンドサイズ

1.transition移行？

.transition-プロパティ：指定するCSSプロパティセットのトランジション効果の名前。
すべての（デフォルト値）、指定された幅、高さ、
.transition-DURATION：ミリ秒又は秒トランジション効果必要所定数の完了。
ユニットを追加する必要があります。s（秒）MS（ミリ秒）== LS 1000msの
遷移遅延：ときにトランジション効果を定義するために開始します。
2S：2秒の遅延遷移が
-2Sは：2秒先の遷移の
遷移タイミング機能：速度は、速度プロファイルの効果を所定の。
移動形態：加速、減速、一定の速度...
リニア（制服）
EASE（デフォルト）
EASEイン（加速度）
EASE-OUT（減速）
EASE-で-OUT（第1の加速度および減速後）
化合物の文言：
移行：すべての2Sリニア;
遷移：リニア2Sすべて;
遷移：リニアすべて2S;
注：遅延時間が同時に発生する総時間は、シーケンス、第1の全時間は、第2の遅延時間があります。

トランジション：2Sすべての線形3S、3Sは、運動の先頭に遅延時間を表し、

 <style>
#box{ width:100px; height: 100px; background:red;
    transition-duration : 2s;
            transition-timing-function: linear;  }
              #box:hover{ width:200px; height: 200px; background: blue;}
              </style>
              </head>
<div id="box"></div>

  </body>
</html>

ここでは、コードを試すことができます

3.変形変換？

翻訳：変位
変換：翻訳（100ピクセル、100ピクセル） ; 二つの値は、x及びyに対応します。
変換：移動X（100ピクセル）;
変換：移動Y、（100pxに）
変換：translateZ（100ピクセル）;（3D）

    <style>
*{ margin:0px; padding:0;}
body{ height:2000px;}
#share{ width:300px; height:300px; background:red; position: fixed;
    left: -300px; top:50%; margin-top:-150px;
    transition:1s;
}
#share div{ width:30px; height: 100px; background:blue; position:absolute;
    right:-30px; top:0;
    color:white;  font-size:30px;
}
#share:hover{ left:0;}
</style>
</head>
<body>
<div id="share">
    <div>分享</div>
</div>
</body>
</html>

スケール：スケール
変換：スケール（NUM）numがノーマル比が1である、スケール値です。
変換2つの値のスケール（NUM1、NUM2）wは対応するH
の変換：scaleXプロパティ（）は
変換：scaleYの（）
変換：scaleZ（）（3D）

 <style>
    #box{ width:538px; height:414px; overflow: hidden;}
    #box img{ transition: .5s linear;}
    #box:hover img{ transform:scale(1.3);}
</style>
</head>
<body>
<div id="box">
    <img src="./wys.jpg" alt="">
</div>
</body>

回転：回転
変換：回転（NUM）NUM回転角30度の
値：時計回りの回転の
負：反時計回りの回転は、
角度またはラジアンラジアン：1つの角度を表します。

回転X（）（3D）
回転Y（）（3D）
回転Z（）

<style>
#box1{ width:300px; height: 300px; border:1px black solid; margin:30px auto;}
#box2{ width:100px; height:100px; background:red; transition: 1s;
    transform-origin: 150px 150px;
}
#box1:hover #box2{ transform:rotate(180deg);}

</style>
 </head>
<body>
<div id="box1">
    <div id="box2">bbbbb</div>
</div>
</body>
</html>

スキュー：マイターは
変換：スキュー（NUM1、NUM2）：NUM1 とNUM2は、xの角度であり、Yは
変換：skewX値を（）
変換：skewY（）
注：スキュー3Dない書き込み。

注：変換のすべては、他の要素に影響を与えません。（相対位置と同様）
注：変更操作インライン（インライン要素）は動作しません。
注：複数の値を同時に提供することができる変換。
次の操作を実行するために、前の操作で行います。
変位は、実行されるように戻って回転し、マイターの影響をスケーリングされます。

4. tranform-原点位置？

主回転とスケーリングのために、出発点は、デフォルトの中心点です。
左、右、左と右の

5.アニメーションアニメーション？

原理：フレームアニメーションによってフレーム。ウィル全体の動きは、100個の部分に分け。

アニメーション名：アニメーション名（カスタム）
アニメーション-DURATION：アニメーションの継続時間
アニメーション遅延：遅延時間アニメーション
アニメーションの繰り返しカウント：アニメーションの繰り返し回数、デフォルト値は1で、無限無制限
animation-タイミング関数：の形の運動アニメーション
容易線形

{@keyframesアニメーション名
{}から
{}まで
}
から100％に相当する端部位置、：開始位置は、0％とに相当します

アニメーションの拡張

  <style>
#box{width:100px; height:100px; background:red; margin:10px;
    animation: 3s move infinite;
    animation-direction: alternate;
}
@keyframes move {
    0%{ transform:translate(0,0);}
    100%{ transform:translate(400px,0)}
}
</style>
 </head>
 <body>
<!-- <div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div> -->
<div id="box"></div>
 </body>
</html>

コンポジットのスタイル：

アニメーション

アニメーションフィルモード：規定またはそのアニメーション効果の後には、アニメーションの前に見えています。
なし（デフォルト値）：移動の終了後に初期位置への復帰は、遅延の場合には、これは0％は、遅延の後に有効にする
：後方遅延前ので0％効果的な遅延の場合に
転送します。運動の終了後終わりに停止
：both-前後を有効にすると同時に、

アニメーションの方向：アニメーションを逆回しにするかどうかの属性を定義します。
代替：前方（0％まで_{100％）、リバース（100％} 0％）
リバース：常に逆の、0％から約100％
ノーマル（デフォルト）：常に正、0％から100％

6. 3D効果？

perspectve（奥行き）：画面からどのくらいの要素、値が小さいほど、より重要なを観察します。
3Dメガネ

回転X
回転Y
translateZ
scaleZ

注：供給された背面斜視図、平面に限ら。

スタイル変換： 3Dスペース
フラット（デフォルト2D）、保存-3D（3Dを、 3次元空間を生成します）

注意：3次元グラフィックスの厚さ限り、3Dコントロールを追加する必要があります。

注：デフォルトでは、キューブ内の最初の面内で回転することになります。
原点tranform：XYZ;（zはワード缶のみ書き込み数字を書くことができません）

透視原産地：深さ-ホームポジション、観測要素の角度。

背面視認性：バック隠す
隠され、可視（デフォルト値）

3Dキューブ言葉遣い

<style>
*{ margin:0; padding:0;}
ul{ list-style: none;}
#box{ width:300px; height: 300px; border:1px black solid; margin:30px auto;
    perspective: 500px;
}
#box ul{ width:100px; height:100px; margin:100px; position: relative;
    transition: 4s;
    transform-style: preserve-3d;
}
#box ul li{ width:100%; height: 100%; position: absolute; left:0; top:0; text-align: center; line-height: 100px; font-size:30px;}
#box ul li:nth-of-type(1){ background:red;}
#box ul li:nth-of-type(2){ background:blue; left:100px; 
    transform-origin:left; transform:rotateY(90deg);}
#box ul li:nth-of-type(3){ background:green; left:-100px;
    transform-origin:right; transform:rotateY(-90deg);
}
#box ul li:nth-of-type(4){ background:hotpink; top:-100px;
    transform-origin:bottom; transform:rotateX(90deg);
}
#box ul li:nth-of-type(5){ background:gray; top:100px;
    transform-origin:top; transform:rotateX(-90deg);
}
#box ul li:nth-of-type(6){ background:yellow;
    transform:translateZ(-100px) rotateY(180deg);
}
#box:hover ul{ transform:rotateY(360deg); }
</style>
 </head>
 <body>
<div id="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
 </body>
</html>

3D書き込み（拡張学習）

scale3d（）：三つの値XYZ
translate3d（）：三つの値XYZ
ROTATE3D（）：四つの値0 | 1（追加した場合の回転角をxは軸）0 | 1（Y軸の回転角を追加した場合）、0 | 1（z DEG）シャフトの回転角度を加えるかどうか
ROTATE3D（1,1,1,30deg）;
スケール翻訳スキュー

7.背景起源：背景の充填位置

1.デフォルトでは、xyはその後、メッキされている場合、境界パディング内容は、背景領域を持っています。

パディング・ボックス（デフォルト）：パディング領域が背景に充填開始し
、境界ボックス：境界領域は、背景の充填を開始する
コンテンツボックスを：コンテンツ領域の背景を埋めるために開始されます

図カットの実施形態の背景：背景クリップ

ボックスパディング
ボーダー・ボックス（デフォルト）
のContent-ボックス

注：カット複合文体の位置は、最初の値の位置を表すとき、第二の値は、作物ことを示しています。

背景を充填

<style>
#box{ width:400px; height:400px; border:50px rgba(255,0,0,.5) solid; background:url('./laoli.jpg') padding-box content-box; padding:50px; color:white;
    /* background-origin: border-box; */
    /* background-origin: content-box;
    background-clip: content-box; */
}
</style>
</head>
 <body>
<div id="box">我是content部分</div>
</body>
</html>

8. CSS3グラデーション？

直線勾配：
背景画像：線形勾配（20deg、赤、青）;
注：は0deg角度は、容器の底部の最下位置にあります。正、時計回りです。

放射状グラデーション：
ラジアル勾配：放射状グラデーション

CSS3グラデーション

 <style>
#box{ width:300px; height:40px; border:1px black solid; margin:50px;
    background-image:linear-gradient( to right top, green 25% , gray 25%, gray 50% , green 50% ,  green 75%, gray 75%);
    background-size:40px 40px;
    animation: infinite linear 3s move;
}
@keyframes move {
    0%{ background-position: 0 0;}
    100%{ background-position: 400px 0;}
}
</style>
</head>
<body>
<div id="box"></div>
 </body>
</html>

その他の株式クラスと戦争に反対する2020