css3新特性

css3 动画

css 2D动画：
方法：

1. 旋转 —— 单位是 度 deg

<div style="transform: rotateZ(-30deg)">旋转</div>

2. 位移 —— 单位是 像素 px

<div style="transform: translateX(150px)">位移</div>

3. 缩放 —— 正常比例是 1 大于1 为放大 小于1 为缩小 没有单位

<div style="transform: scale(1.5,1.5)">缩放</div>

4. 倾斜 —— 单位是 度

<div style="transform: skewX(45deg)">倾斜X</div>
<div style="transform: skewY(45deg)">倾斜Y</div>
<div style="transform: skew(30deg,30deg)">倾斜</div>

5. 文字反倾斜的方式

<div style="transform: skewX(45deg)">
    <p style="transform: skewX(-45deg)">倾斜</p>
</div>

3D 动画

开启3D动画：

1. transform-style: preserve-3d
2. perspective：像素单位；
3. 3D动画方法与2D一样！

自定义动画

自定义动画： 也叫关键帧动画，其中，制作动画和绑定动画两个过程缺一不可
备注:
1） 衣服可以制作很多件
2） 同一件衣服也可以给多个人穿
3）动画可以制作很多个，且可以绑定给很多个元素

绑定动画 (穿衣服)：
animation 属性是一个简写属性，用于设置六个动画属性：

1. animation-name ：动画名称 必填
2. animation-duration： 动画执行所需的时间 必填
3. animation-timing-function： 动画执行的速度曲线 可选 默认值 ease
4. animation-delay：动画开始之前的延迟 可选 默认值 0s
5. animation-iteration-count ： 动画执行的次数 可选 默认值1 没有单位 infinite:无限次
6. animation-direction： 规定是否轮流反向播放 (注意：播放次数至少为2) 可选 默认不反向,alternate：反向播放
   注释： 请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。

.ball{
 animation: myAnimation 3s ease-in-out 4s infinite alternate;
}

制作动画 (做衣服)：
备注： @keyframes 声明自定义动画的关键词 后面需要写自定义动画的名称，空格间隔

@keyframes myAnimation{
    /*from{} 相当于 0%*/
    /*to{}  相当于 100%*/

    0%{}
    25%{
        transform: translateX(400px);
    }
    50%{
        transform: translate(400px,400px);
    }
    75%{
        transform: translate(0px,400px);
    }
    100%{}
}

盒模型

开启怪异盒模型：

#box_two{
	box-sizing: content-box;
}

怪异盒模型的宽高：
等于 = width/height + margin
等于 = 内容区域宽高 + padding + border + margin

备注： padding在怪异盒模型中会影响内容区

怪异盒模型与标准和模型的区别：
标准盒模型内的padding值会增加实际宽度
怪异盒模型不会 但会影响内容区域

开启弹性盒模型：

  	  .main{
			/*开启弹性盒模型*/
			display: flex;
		}

开启弹性盒模型后位置的变化：

根据主轴上的位置变化:
对齐方式：

1. flex-start: 开始位置 (默认值)
2. flex-end: 结束位置
3. center: 中心位置
4. space-around: 两端对齐 (元素到边框的距离是 元素之间的一半)
5. space-between: 两端对齐 (元素到边框之间没有距离)

		.main{
			justify-content:space-around;
		}

主轴的方向 （规定所有的子元素）：

flex-direction: 
			 row（默认值）：从左到右。
			 row-reverse： 从右到左 
			 column：从上到下 
		     column-reverse：从下到上

交叉轴上的对齐方式 （规定所有的子元素）:

align-items:
			flex-start:交叉轴的起点对齐。 
			flex-end: 交叉轴的终点对齐。 
			center: 交叉轴的中点对齐。 
			baseline: 项⽬的第⼀⾏⽂字的基线对齐。 
			stretch（默认值）: 如果项⽬未设置⾼度或设为auto，
			  				   	将占满整个容器的⾼度

备注： align-content 的功能和 align-item类似
不同点： 该属性必须多行的时候，对单行元素无效
同时，也可以去掉多余的行间距

开启换行：
备注： 弹性盒模型下， 默认是不换行

flex-wrap：
		  nowrap: 不换行
		  wrap: 换行
		  wrap-reverse : 倒序换行