box-size：width **
これにより、内側の余白を増減した後にボックスが引き伸ばされたかどうかを計算する必要がなくなります。これは、内側の余白がどのように変化しても、ボックスのサイズは常に幅と同じになるためです。
フィルタ：ぼかし（5px）
写真フィルタ、css3はフィルタ効果を追加します。角かっこ内の値が大きいほど、画像がぼやけます。
width：calc（100％-30px）
は、ボックスの幅と高さを自動的に計算し、外界の変化に応じてサイズを動的に変更し、対応する効果を生み出すために使用できます。
css3以上
遷移：プロパティ遷移時間遷移方法（デフォルトのイーズ）開始時間遷移
効果は、ホバーでよく使用されます。後者の2つのプロパティはオプションで、最初の2つは必須です。
div:{
width:100px;
transiton：width 1.5s；
}
div:hover {
width:400px;
}
ボックスの幅が元の幅から400pxに変更されました。
ホバーで複数の属性を一緒に変更する必要がある場合は1.5秒かかります。すべてを使用して、最初の属性を書き込むことができます。属性の変更を指定する必要がある場合。transiton：width 1.5s，height 1.5s；複数のトランジションはコンマで区切ることができます。
2D変換
変換：変換（x、y）
移動はボックスの移動に使用されます。
変換のパラメータはパーセンテージにすることができますが、パーセンテージは画面のパーセンテージではなく、独自のボックスのパーセンテージに従って計算されます。
翻訳はインラインタグには影響しません。
div:{
width:100px;
transform：translate（100px,150px）；
}
*トランスレートの最大の利点は、変形しても他のボックスに影響を与えないことです。どのように上下しても、隣接するボックスとは関係ありません。
ボックス変形のボックス移動に使用されるプロパティの2つのパラメータは、それぞれx軸とy軸のオフセットに対応します。使用する前に、Webページのxy軸が私たちの生活のxy軸とは異なることを理解する必要があります。 、Webページのy軸軸は下向きに展開し、y値は下がるにつれて増加します。
レイアウトでは、次のような効果をよく使用します。商品のラインを並べて表示したり、特定の商品にカーソルを合わせると、浮遊感があり、このスタイル変換が可能です。
div:hover{
transform：translate（0,-5px）；
}
trasform：rotate（x deg）
rotateはボックスを回転させることです。ボックスを45度回転させる場合、属性単位は度で定義されます。
あなたはできる：
transform：rotate（45deg）；
注意する必要があります。
角度が正の場合は時計回りに回転し、角度が負の場合は反時計回りに回転します。
デフォルトの回転の中心点は要素の中心点です。
場合によっては、ボックスの背面に小さな三角形のアイコンを追加する必要があります。以前は、アイコンを使用してからフォントアイコンを使用することしかできませんでしたが、今では回転によって行うことができます。最初に定義します。小さなボックスで、下の境界線と境界線のみを定義します。次に、45度回転することで実現します。もちろん、css3、:: afterで疑似要素セレクターを組み合わせて、それをブロックレベルの要素に変換し、幅と高さを定義して、ポジショニングを実装することもできます。
div::after{
content:"";
display:block;
width:10px;
height:10px;
transform:(45deg);
border-bottom:1px solied #000;
border-right:1px solied #000;
transition:all 0.4s;
}
div:hover::after{
transform:rotate(180deg);
}
変換元
回転の中心点を設定するために使用できます。属性のパラメータは、px、パーセンテージ、方向の名詞の3つの形式にすることができます。ピクセルは、座標軸に従って対応する点を見つけ、中心点として設定します。パーセンテージは、それ自体のサイズのパーセンテージに従って計算されます。デフォルトは50％50％です。位置名詞には、左、右などが含まれます。
transform：scale（x、y）は
、ボックスのスケーリングに使用されます。属性パラメーターの単位は制限されていません。pxまたは複数のスケーリングが可能です。パラメーターが1つだけ記述されている場合は、幅と高さをスケーリングする必要があることを意味します。その機能定型化されたwidth：xxx; height：xxx;の効果は、過度の効果とほぼ同じですが、scaleを使用する利点は、デフォルトで中心点でスケーリングされ、他のボックスに影響を与えないことです。
transform：scale（2，2）； //盒子宽高变为原来的两倍
transform：scale（3）； //盒子宽高同时变为原来的三倍
transform：scale（0.5，0.5）； //盒子宽高变为原来的一半
transform：scale（0.6）； //盒子宽高同时变为原来的0.6倍
ケース：
マウスがボックスの上を通過すると、ボックス内の画像が拡大されます。他の要素の位置に影響を与えないように、スケールを選択して続行できます。
div {
width:100px;
height:100px;
overfolw:hidden;
}
div img {
transition:all .4s;
}
div img:hover {
transform:scale(1.1);
}
まとめ
2Dトランジションは包括的に記述できますが、動きを一番上に置くことを忘れないでください。そうしないと、効果が想像とは異なります。
css3アニメーション
アニメーションの使用は、2Dトランジションよりもゴージャスで便利です。通常、アニメーション効果を2つの部分に分割する必要があり
ます。1。アニメーションを定義する2.アニメーションを使用する
@keyframes move {
/*开始状态*/
0%：{
transform： translate（0，0）；
}
/*结束状态*/
100%：{
transform： translate（1000px，0）；
}
}
div{
width：150px；
height;150px;
background:pink;
/*动画名称*/
animation-name:move;
/*动画时间*/
animation-duration:2s
}
@ keyframes xxxを使用してアニメーションを定義します。名前は任意に定義できます。定義の2つの最も重要な属性は、アニメーションの開始状態と終了状態がどのように見えるかを示すことです。次に、誰が誰を定義するかという原則に従い、animation-name：xxxとanimation-durationを使用して、アニメーションの名前と、アニメーションを使用する必要のあるボックス内のアニメーションの期間を指定します。
もちろん、アニメーションに開始と終了の2つの状態しかない場合は、それぞれ0％と100％の代わりにfromとtoを使用できます。
アニメーションにマルチステート要件がある場合、0％、25％、75％、100％などのパーセンテージを使用できますが、最も重要なことは、開始状態と終了状態を定義することです。
アニメーションのプロパティ：
1.@keyframes //定义属性
2.animation-name //定义使用动画名
3.animation-duration //定义动画时长
4.animation-delay //定义动画何时开始
5.animation-iteration-count //定义播放次数，默认为1，参数infinite表示无限播放
6.animation-direction //定义动画周期结束后是否还反方向播放，默认为normal，如果要反方向则需要参数alternate
7.animation-fill-mode //定义动画播放后的状态，是否回到起始位置，默认是backwards,若不返回则需要参数forwards
8.animation-play-state //定义动画是否暂停，参数为paused，常搭配：hover来使用。
ショートフォーム：
animation：动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始/结束位置
モーションカーブ
ease //先匀速后减速
linear //保持匀速
steps（n） //保持步长，按规定的次数完成
3D変換
3D変換を学びたい場合、最初に理解する必要があるのはフロントエンドの3Dプランです。
transform-translate3d：（x、y、z）は
、ボックスを3次元空間で移動するために使用され、その使用法は2D移動と同様です。
遠近法の
3D遠近法効果は、3Dの目として理解できます。彼を通してのみ、3D効果を見ることができます。通常、親ボックスに追加して、ほぼ大きい、はるかに小さい効果を適用する必要があります。遠近法が小さいほど、パラメータ、ボックスが大きく見えるほど、パラメータの単位はpxです。
transform-rotate3d（x、y、z、deg）;
これは3Dベースの回転です。回転する必要がある人は、対応する位置に1を書き込みます。もちろん、複数の値がある場合、回転する最終軸は次のように計算されます。ベクトル演算に。
3つの異なる軸に沿って順番に回転させることができます。親ボックスに遠近法を追加すると、3D回転の効果がより明確になります。
transform-rotateX（xdeg）; //以x轴做旋转
transform-rotateY（ydeg）; //以y轴做旋转
transform-rotateZ（zdeg）; //以z轴做旋转
transform-styleは
、子ボックスで3dモードをオンにするかどうかを制御するために使用されます。デフォルトではオンになっていないため、手動で設定する必要があります。
transform-style：preserve-3d
プライベートプレフィックスを要約します
