Css3属性比css 2强很多。增加了很多新的属性，今天重点介绍开发中会用到的css3属于。

　　1、 css3媒体查询，是开发自适应网站的必备。

　　常规写法：

　　@media (min-width: 700px) { 选择器 { 样式 } }

　　@media mediatype and | not | only (media feature) {}

　　2、 布局方式使用弹性盒子

　　写法：

　　Display:flex

　　justify-content: flex-start | flex-end | center | space-between | space-around;

　　align-items: flex-start | flex-end | center | baseline | stretch;

　　flex-direction: row | row-reverse | column | column-reverse;

　　flex-wrap: nowrap | wrap | wrap-reverse;

　　align-content: flex-start | flex-end | center | space-between | space-around | stretch;

　　flex-flow:||;

　　align-self: auto | flex-start | flex-end | center | baseline | stretch;

　　3、 伪类选择器

　　:first-child选择父元素里边的第一个子元素

　　:last-child选择父元素里边的最后一个子元素

　　:nth-child(n)选择父元素里边第n个子元素

　　:nth-last-child(n)选择父元素里边倒数第n个子元素

　　:nth-of-type(n)

　　：nth-last-of-type(n)

　　:first-of-type

　　:last-of-type

　　：only-child

　　：only-of-type

　　：empty

　　::before

　　::after

　　::selection

　　::first-letter

　　::first-line

　　4、 动画属性

　　透明度 opacity: 0.5;

　　(transition)过渡样式属性

　　过渡属性

　　transition: all 2s linear 1s;

　　all所有能过渡属性都过渡，具体属性名如：width：只有width有过渡。数字+s秒

　　transition-property: width;

　　规定应用过渡的 CSS 属性的名称

　　花费时间

　　transition-duration: 1s;

　　定义过渡效果花费的时间，默认是 0

　　时间曲线

　　transition-timing-function:linear;

　　过渡效果的时间曲线，默认是 "ease"

　　何时开始

　　transition-delay: 2s;

　　规定过渡效果何时开始，默认是 0

　　注意点：

　　1、过渡需要：默认状态 和hover状态样式不同，才能有过渡效果

　　2、transition属性给需要过渡的元素本身加

　　3、transition属性设置在不同状态中，效果不同

　　①、给默认状态设置，鼠标移入移出都有过渡效果

　　②、给hover设置状态，鼠标移入有过渡效果，移出没有过渡效果

　　(transform)平面2D 转换样式属性

　　transform：translate;

　　旋转

　　transform：rotate(角度);

　　指定对象的2D rotation(2D旋转)，角度单位是(deg)，需先有transform-origin属性的定义

　　旋转中心

　　transform-origin：

　　默认圆点是盒子中心点(原点水平位置,原点垂直位置)允许您改变被转换元素的位置(即是参考点)

　　旋转取值

　　left,right,top,bottom,

　　center

　　旋转transform-origin属性取值(单位可以写像素，也可以写百分比)

　　缩放

　　transform：scale;

　　指定对象的2D scale(2D缩放)，第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值

　　平面转换：

　　1、改变盒子在平面内的形态(位移、旋转、缩放)

　　2、2D转换：①、 移动 translate ②、 旋转 rotate ③、缩放 scale

　　备注：旋转角度单位是(deg) 旋转需要加过渡效果

　　(transform)3D空间转换转换样式属性

　　transform: translate3d(x,y,z);

　　在translate2D的基础上增加z轴方向上的维度translateX(n),translateY(n)，translateZ(n)

　　旋转transform: rotate3d(x,y,z,deg);

　　3D呈现

　　transform-style: preserve-3d;

　　缩放

　　transform：scale3d(x,y,z);空间缩放效果scaleY(倍数), scaleZ(倍数),scaleX(倍数)

　　3D转换：

　　①、移动 translate3d ②、透视perspective ③、旋转rotate3d ④、3D呈现transfrom-style

　　备注：透视 perspective写在父元素上(近大远小)

　　3D呈现transform-style: preserve-3d; 写给父级

　　(animation)动画样式属性

　　定义动画@keyframes

　　动画属性animation

　　动画名称animation-name

　　时间周期animation-duration

　　速度曲线animation-timing-function

　　规定动画的速度曲线，默认是"ease"。匀速：linear

　　动画开始animation-delay

　　播放次数animation-iteration-count

　　逆向播放animation-direction