3D変換
[キューブ]
[効果]紙
[切り取り]カルーセル図ケース
ビューティーケース[アルバム]
アニメーション
アニメーションは正確に1つ又は複雑なアニメーションを実現するために使用されるアニメーションの複数のノードのグループによって制御することができます。
アニメーションやトランジションの違い：
1. 过渡必须触发，需要两个状态的改变。
2. 动画可以一直运行下去，不需要触发。实现效果与过渡差不多映画のための基本的な手順：
//1.通过@keyframes指定动画序列
//2.通过百分比或者from/to将动画分割成多个节点（from to 只能设置两个状态的变化，满足不了复杂动画的要求，复杂使用百分比）from to 等于 0% 100%
//3.在各个节点中分别定义样式
//4.通过animation将动画应用于相应的元素詳細なアニメーション
アニメーションは、8つのパラメータの合計化合物の属性です
animation-name:动画名称，由@keyframes定义的
animation-duration：动画的持续时间
animation-timing-function：动画的过渡类型
animation-delay：动画的延迟时间
animation-iteration-count：动画的循环次数（infinite无限次）
animation-direction：设置动画在循环中是否反向运动
animation-fill-mode：设置动画时间之外的状态，动画的最终状态（forwards 停留在最终状态）
animattion-play-state:设置动画的状态。动态状态配合：hover使用アニメーションライブラリ
https://daneden.github.io/animate.css/
フォントのアイコン
その後、我々は、多くの場合、ページは、一般的に歪みあれば小さいアイコン、作られたスプライト、その後、バックグラウンド位置で位置を調整するが、絵を導入する必要性、及び画像サイズの変更を使用していました。あなたはすなわち、同じテキストを使用してアイコンを使用して、CSS3のフォント画像を使用することができます。
利点：
図1に示すように、すべての要求を低減すること、アイコンフォントライブラリにパッケージ。
図2に示すように、透明性を確保することができ、特性ベクトルを有しています。
図3に示すように、フレキシブル、維持しやすいです。
アリババベクトルのアイコン:(カスタマイズすることができます）http://www.iconfont.cn/plus/collections/index?type=1
フォント恐ろしい使用http://fontawesome.dashgame.com/
弾性レイアウト（ストレッチレイアウト）
レイアウト：実際には、水平方向及び垂直方向の調整要素のレイアウト。
CSS3のレイアウトは、私たちは配置のブロックレベル要素のレイアウトは、その強力な拡張性は非常に適応性、非常に柔軟になり、応答性のオープンに重要な役割を果たすことができる作り、非常に大きな改善を行っています。
[デモ：01-ストレッチレイアウト最初の経験の.html]
ボックスは、ディスプレイに設けられている場合：フレックス後、ボックスがあります、メインシャフトとサイドシャフトの概念を。
スピンドル：デフォルトの向きを設定するための容器主軸のFlex Flexプロジェクトは水平で
横軸：軸垂直スピンドル軸側にデフォルト垂直によって、参照される
方向デフォルトの左から右にスピンドル、デフォルトの上部から側シャフト下
[画像のダンプはチェーンが失敗し、発信局は、直接アップロード（IMG-wpUM2YAR-1583941642738）（画像/ flex01.png）ダウン画像を保存することが推奨され、セキュリティチェーン機構を有していてもよいです]
フレックス方向
フレックスdiretionは、主スピンドルの向きを調整するために使用される、デフォルトは水平方向であります
一般的な、非常に小さな調整スピンドル方向に、理解することができます。
オプションの値
row：主轴方向为水平向右
column：主轴方向为竖直向下
row-reverse:主轴方向为水平向左
column-reverse:主轴方向是竖直向上。-正当化コンテンツ（キー）
正当化コンテンツは、主に設定するために使用される配向の主方向を、オプション値は次のとおりです。
オプションの値：
flex-start: 弹性盒子元素将向起始位置对齐
flex-end: 弹性盒子元素将向结束位置对齐。
center: 弹性盒子元素将向行中间位置对齐
space-around: 弹性盒子元素会平均地分布在行里
space-between:第一个贴左边，最后一个贴右边，其他盒子均分，保证每个盒子之间的空隙是相等的。ALIGN-項目（キー）
調整するためにALIGN-アイテムの実施形態のその側のシャフトを、値は任意です。
flex-start： 元素在侧轴的起始位置对其。
flex-end： 元素在侧轴的结束位置对其。
center： 元素在侧轴上居中对其。
stretch： 元素的高度会被拉伸到最大（不能给死高度）。フレックスラップ
フレックスラップコンテナは、単一の属性制御フレックス行以上になると、デフォルトでは折り返されません。
nowrap： 不换行（默认），会压缩子盒子的宽度。
wrap： 当宽度不够的时候，会换行。ALIGN-コンテンツ
ALIGN-コンテンツはコンテナの複数の列の配置を曲げるために設けられています。
flex-start： 各行向侧轴的起始位置堆叠。
flex-end： 各行向弹性盒容器的结束位置堆叠。
center： 各行向弹性盒容器的中间位置堆叠。
space-between： 各行在侧轴中平均分布。
space-around： 第一行贴上边，最后一个行贴下边,其他行在弹性盒容器中平均分布。
stretch：拉伸，不设置高度的情况下。ALIGN-コンテンツの差ALIGN-アイテム
align-items调整的是侧轴的对其方式，不换行一般用align-items
align-content:必须是多行才生效，如果单行，没有效果。换行了就用align-content。Flexプロパティ
上記の特性は、次のいくつかの属性がサブボックスに提供され、親のボックスセットに話しています。
flex属性は、サブスピンドルカートリッジ領域を割り当てる方法を設定するために使用されます
flex:1順序プロパティ
順序属性は、注文項目を定義します。値が小さいほど、より前方に配置は、デフォルトは0です。
order:1;ALIGN-セルフアライン-アイテム：
ALIGN-自己シャフトの側の位置に設けられているが、ALIGN-自己セットサブエレメント、ALIGN-アイテムの優先度よりも高い優先順位。
取值与align-items的取值一样。ルアンYifengさんのブログhttp://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
[演習：6面体サイコロ神]