新增2D和3D属性

• 2D变形(CSS3) transform
• 移动 translate(x, y)
• 缩放 scale(x, y)
• 旋转 rotate(deg)
• transform-origin可以调整元素转换变形的原点
• 倾斜 skew(deg, deg)

• translateX(x)
• translateY(y)
• translateZ(z)
• 透视(perspective)
• translateX(x）
• translateY(y）
• translateZ(z)
• translate3d(x,y,z)
• 开门案例
• backface-visibility
• 两面翻转

• 小汽车案例

• flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配
• flex-direction调整主轴方向（默认为水平方向）
• justify-content调整主轴对齐（水平对齐）
• align-items调整侧轴对齐（垂直对齐）
• flex-wrap控制是否换行
• align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐
• order控制子项目的排列顺序，正序方式排序，从小到大

2D变形(CSS3) transform

移动 translate(x, y)

translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）translateX(x)仅水平方向移动（X轴移动）translateY(Y)仅垂直方向移动（Y轴移动）

水平移动100像素

transform: translateX(100px);

不是以父级宽度为准，以自己宽度为准，50%是走自己宽度的一半像素。

transform: translate(50%)

在绝对定位时，我们采用left和marggin-left是盒子水平居中，但是如果遇到盒子宽度为327px，我们应该将marggin-left属性改用transform：translate（50%）比较好。

div {width: 200px;height: 200px;background-color: pink;/*transform: translate(100px)  水平移动100像素*//*transform: translate(50%)  translate 如果移动的距离是%不是以父级宽度为准，以自己宽度为准*//*transform: translate(50%);  y意思就是让div盒子 自己宽度200 的一半 走 100像素*//*已让我们让定位的盒子居中对齐*/position: absolute;left: 50%; /*以父级宽度为准*/top: 50%;/*margin-left: -100px; 需要计算不合适*/transform: translate(-50%, -50%);}

缩放 scale(x, y)

scale()的取值默认的值为1，当值设置为0.01到0.99之间的任何值，作用使一个元素缩小；而任何大于或等于1.01的值，作用是让元素放大

section img {transition: all 0.2s;/*因为图片缩放了，实际图片做动画 所以过渡要给img 做动画  谁做动画，谁加过渡*/}section:hover img {  /*鼠标经过section 的时候 里面的img做 缩放*/transform: scale(1.2);}

旋转 rotate(deg)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);

注意单位是 deg 度数

transform-origin可以调整元素转换变形的原点

与rotate（）搭配使用

div{transform-origin: left top;transform: rotate(45deg);}/* 改变元素原点到左上角，然后进行顺时旋转45度 */

如果是4个角，可以用 left top这些，如果想要精确的位置， 可以用 px 像素。

div{transform-origin: 10px 10px;transform: rotate(45deg);}/* 改变元素原点到x 为10  y 为10，然后进行顺时旋转45度 */

倾斜 skew(deg, deg)

• 该实例通过skew方法把元素水平方向上倾斜30度，处置方向保持不变。
• 可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。

transform: skew(0, -30deg);/*水平向下倾斜*/transform:skew(30deg,0deg);/*水平向上倾斜*/

3D变形(CSS3) transform

注意和左手坐标系是不一样的

translateX(x)

就是沿着 x 立体旋转.

img {display: block;margin: 100px auto;transition: all 1s;}img:hover {transform: rotateX(360deg);}

translateY(y)

沿着y轴进行旋转

img {display: block;margin: 100px auto;transition: all 5s;}img:hover {transform: rotateY(360deg);}

translateZ(z)

沿着z轴进行旋转

img {margin: 100px;transition: all 5s;}img:hover {transform: rotateZ(360deg);}

透视(perspective)

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。

• 透视原理： 近大远小 。
• 浏览器透视：把近大远小的所有图像，透视在屏幕上。
• perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置
  perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

body {perspective: 1000px;  /*视距 距离 眼睛到屏幕的距离  视距越大效果越不明显 视距越小，透视效果越明显*/}img {margin: 100px;transition: all 5s;}img:hover {transform: rotateY(360deg);}

translateX(x）

仅水平方向移动**（X轴移动）

transform: translateX(100px);

translateY(y）

仅垂直方向移动（Y轴移动）

transform: translateY(100px);

translateZ(z)

仅垂直方向移动（Z轴移动）
translateZ 越大，我们看到的物体越近，物体越大

div:hover{transform: translateZ(300px);/*透视是眼睛到屏幕的距离 透视只是一种展示形式 是有3d效果的意*//*translateZ是物体到屏幕的距离 Z是来控制物体近大远小的具体情*/}

translate3d(x,y,z)

div:hover {/*transform: translate3d(x, y, z); x 和 y 可以是 px 可以是 %  但是z 只能是px*/transform: translate3d(100px, 100px, 300px);}

开门案例

body {}.door {width: 300px;height: 300px;margin: 100px auto;border: 1px solid gray;perspective: 1000px;background: url(\'images/dog.gif\') no-repeat cover;position: relative;}.door > div {box-sizing: border-box;border: 1px solid black;}.left {float: left;width: 50%;height: 100%;background-color: brown;transform-origin: left center;transition: 1s;position: relative;}.left::before {content: \'\';position: absolute;width: 20px;height: 20px;border-radius: 50%;top: 50%;right: 0px;transform: translateY(-10px);border: 1px solid whitesmoke;}.right {width: 50%;height: 100%;float: left;background-color: brown;transform-origin: right center;transition: 1s;position: relative;}.right::before {content: \'\';position: absolute;width: 20px;height: 20px;border-radius: 50%;top: 50%;left: 0px;transform: translateY(-10px);border: 1px solid whitesmoke;}.door:hover .left {transform: rotateY(-130deg);}.door:hover .right {transform: rotateY(130deg);}

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见，translateZ(90px)。

两面翻转

div {width: 224px;height: 224px;margin: 100px auto;position: relative;/*transform-style: preserve-3d;*//*  1.保留当前空间位置2.是图片扁平化*/}div img {position: absolute;top: 0;left: 0;transition: all 8s;}div img:first-child {z-index: 1;backface-visibility: hidden;  /*不是正面对向屏幕，就隐藏*/}div:hover img {transform: rotateY(180deg);}

动画(CSS3) animation

animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向;

@keyframes 动画名称 {from{ 开始位置 }  0%to{  结束  }  100%}

小汽车案例

img {/*animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;*/animation: car 5s infinite;  /*引用动画*/}/*定义动画*/@keyframes car {0% {transform: translate3d(0, 0, 0);}50% {transform: translate3d(1000px, 0, 0);}51% {transform: translate3d(1000px, 0, 0) rotateY(180deg);/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/}99% {transform: translate3d(0, 0, 0) rotateY(180deg);/*如果多组变形 都属于 tarnsform 我们用空格隔开就好了*/}}

伸缩布局(CSS3)

• 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向
• 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向的
• 方向：默认主轴从左向右，侧轴默认从上到下

flex子项目在主轴的缩放比例，不指定flex属性，则不参与伸缩分配

min-width 最小值 min-width: 280px 最小宽度 不能小于 280
max-width: 1280px 最大宽度 不能大于 1280

flex-direction调整主轴方向（默认为水平方向）

flex-direction: column 垂直排列
flex-direction: row 水平排列

justify-content调整主轴对齐（水平对齐）

子盒子如何在父盒子里面水平对齐

align-items调整侧轴对齐（垂直对齐）

子盒子如何在父盒子里面垂直对齐（单行）

flex-wrap控制是否换行

当我们子盒子内容宽度多于父盒子的时候如何处理

1. flex-flow是flex-direction、flex-wrap的简写形式

flex-flow: flex-direction  flex-wrap;

flex-flow: 排列方向 换不换行

align-content堆栈（由flex-wrap产生的独立行）多行垂直对齐方式齐

align-content是针对flex容器里面多轴(多行)的情况,align-items是针对一行的情况进行排列。

必须对父元素设置自由盒属性display:flex;，并且设置排列方式为横向排列flex-direction:row;并且设置换行，flex-wrap:wrap;这样这个属性的设置才会起作用。

order控制子项目的排列顺序，正序方式排序，从小到大

用整数值来定义排列顺序，数值小的排在前面。可以为负值。 默认值是 0

order: 1;

接下来学习BFC啦第七章见嘻嘻