box-size：width**
这样就可以让我们不必要再去计算盒子增减内边距后有没有撑开什么的，因为无论内边距如何变化，盒子的大小始终只会等于width。
filter：blur（5px）
照片滤镜，css3为我们增加了滤镜效果，当括号中的数值越大，则图片越模糊。
width:calc（100%-30px）
可以自动计算盒子的宽高，根据外界的变化而动态变化自身大小，可以利用于相应式的效果制作。
css3过度
transition：属性 过度时间 过度方式(默认ease) 开始时间
过度效果常搭配于hover来使用，后俩属性可以选填，前两个必填。
div:{
width:100px;
transiton：width 1.5s；
}
div:hover {
width:400px;
}
盒子宽度由原先变为400px.用时1.5s
如果需要hover中的多个属性一起变化，则可用all来写第一个属性。若需指定属性变化。则可transiton：width 1.5s，height 1.5s；多个过度用逗号隔开。
2D转换
transform：translate（x,y）
translate用于盒子的移动。
translate里面的参数可以是百分比，但百分比不是按照屏幕的百分比来计算，而是根据自身盒子的百分比来计算。
translate对于行内标签是没有作用的。
div:{
width:100px;
transform：translate（100px,150px）；
}
*translate的最大优点就是可以在变形的时候不影响其他盒子，无论上天入地，皆于相邻盒子无关。
用于盒子变形当中的盒子移动，属性中的两个参数分别对应x轴和y轴的偏移量，使用之前我们要了解到网页中的xy轴是不同于我们生活当中的，网页中的y轴是向下发展，越往下y值越大。
在布局中我们常常用到以下效果，当一行商品排列展示的时候，当我们鼠标经过某一个商品时，会感觉商品有上浮的感觉，我们就可以利用这一样式转换
div:hover{
transform：translate（0,-5px）；
}
trasform：rotate（x deg）
rotate是对于盒子进行旋转，属性单位则是通过deg度来定义，若想要盒子旋转45度。
则可以：
transform：rotate（45deg）；
要注意的是：
角度为正则顺时针旋转，角度为负则逆时针旋转。
默认旋转的中心点是元素中心点。
有些案例需要在盒子的后面加上小三角图标，以前我们只能使用icon然后通过字体图标去实现，现在我们可以通过rotate来实现，先定义一个小盒子，只给他定义下边框和有边框，然后通过旋转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);
}
transform-origin
可以用来设置旋转的中心点，属性的参数可以是三种形式，px，百分比，方位名词，像素即根据坐标轴找到对应的点设置为中心点，百分比则依旧 是根据自身大小的百分比计算，默认为50% 50%。方位名词则包含left，right等等。
transform：scale(x,y)
用来对盒子进行缩放，属性参数的单位不限，可以是px，也可以是倍数缩放，如果参数只写一个，则表示宽高要等比缩放，他的作用和过度效果中写死width：xxx;height:xxx;的效果是几乎无异的，但是使用scale的优点在于它是默认以中心点进行缩放，且不会影响其他盒子。
transform：scale（2，2）； //盒子宽高变为原来的两倍
transform：scale（3）； //盒子宽高同时变为原来的三倍
transform：scale（0.5，0.5）； //盒子宽高变为原来的一半
transform：scale（0.6）； //盒子宽高同时变为原来的0.6倍
案例：
当鼠标经过盒子的时候，盒子当中的图片会有放大效果，为了不影响其他元素的位置，我们可以选择scale来进行。
div {
width:100px;
height:100px;
overfolw:hidden;
}
div img {
transition:all .4s;
}
div img:hover {
transform:scale(1.1);
}
小结
2D过渡是可以综合来写的，但是要切记将移动放在最前面，否则效果就会和我们的想象有所差异。
css3动画
动画的使用是比2D过度更加的绚丽方便，我们想要动画效果通常分为两部，
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来定义动画，名字我们可以任意定义，定义最重要的两个属性就是要告诉这个动画的开始状态和结束状态分别是什么样子的。然后秉承谁使用谁定义的原则，在需要使用动画的盒子中通过animation-name：xxx和animation-duration来分别指定动画的名称以及动画时长。
当然如果我们的动画仅仅只有开始和结尾两种状态，我们可以使用from和to来分别代替0%和100%。
当动画有多状态需求时，我们可以使用百分比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转换，最先要了解的就是前端的三维平面图。
transform-translate3d：（x,y,z）
用来对盒子进行三维空间上的移动，用法类似于2d移动。
perspective
3d透视效果，可以将它理解为3d眼睛，只有通过他才能看见我们的3d效果，我们通常需要将它加在父盒子上面，秉承我们的近大远小的效果，透视的参数越小，盒子看上去越大，参数的单位为px。
transform-rotate3d（x,y,z,deg）;
这是基于3d的旋转，谁需要旋转在相应位置写1，当然如果有多个值，则根据矢量运算计算得出最后要旋转的轴。
可以延三个不同的轴依次旋转，如果再父盒子当中加上透视，3d旋转的效果会更加明显。
transform-rotateX（xdeg）; //以x轴做旋转
transform-rotateY（ydeg）; //以y轴做旋转
transform-rotateZ（zdeg）; //以z轴做旋转
transform-style
用于控制子盒子是否开启3d模式，默认情况下是不开启的，需要手动设置
transform-style：preserve-3d
总结私有前缀
