CSS3-选择器、2D变换、动画、3D变换、浏览器私有前缀

zoom:1:ie6清除浮动的方法只有IE6-IE7实现，其他浏览器不执行。它通常与其他组合使用。box{*zoom:1;}使用before和after双伪元素清除float.box:after,.box:before{content:"";显示：表格；}.box:after{clear:both;}.box{*缩放：1；}五、CSS2D变换Transform（变换）是CSS3中的颠覆性特性之一。可以实现元素的位移、旋转、变形和缩放：scalemovement:translaterotation:rotatetilt:skew1,2Dmovementtranslate2Dmovement是2D变换中的一个函数，可以改变元素在页面中的位置，类似于定位.transform:translate(x,y);transform:translateX(n);transform:translateY(n);定义一个二维变换，将元素沿X、Y轴移动translate中的百分比单位是相对于自身的translate元素：（50%，50%）；translate类似于定位，不会影响其他元素的位置。它对内联标签没有影响div{background-color:lightseagreen;宽度：200px；高度：100px；/*translation*//*水平和垂直移动100px*//*transform:translate(100px,100px);*//*水平移动100px*//*transform:translate(100px,0)*//*垂直移动100px*//*transform:translate(0,100px)*//*水平移动100px*//*transform:翻译X(100px);*//*垂直移动100px*/transform:translateY(100px)}2.2D转换的旋转rotate2D意思是让元素旋转在2维平面上顺时针或逆时针旋转。transform:rotate(angle)rotate后面是degrees，单位是deg。角度为正时顺时针旋转，角度为负时默认逆时针旋转中心点为元素中心点。设置旋转中心点：transform-origin:xy;//(left,right,top,bottom,center)img:hover{transform:rotate(360deg)}3.2D转换缩放scale，顾名思义，可以放大缩小。只要给元素加上这个属性，就可以控制它放大或缩小。transform:scale(x,y);transform:scale(1,1)：与无缩放相比，宽度和高度加倍transform:scale(2,2)：宽度和高度加倍transform:scale(2)：写入只有一个参数，第二个参数与第一个参数相同，相当于scale(2,2)transform:scale(0.5,0.5):scale(0.5,0.5):scaledown4、按顺序使用多个变换同时，其格式为：transform:translate()rotate()scale()...等，顺序会影响变换的效果。先旋转会改变坐标轴的方向，但是当我们同时有position或者其他属性的时候，一定要把位移放在前面。六、CSS动画1.什么是动画*动画是`CSS3`中最具颠覆性的特性之一，可以通过设置多个节点来精确控制一个或一组动画，从而实现复杂的动画效果2.基本使用animation*先定义动画*再调用定义的动画3.语法格式（定义动画）@keyframes动画名称{0%{width:100px;}100%{width:200px}}4.语法格式（使用动画）div{/\*调用动画\*/animation-name:动画名称;/\*duration\*/animation-duration:duration;}5.动画序列*0%是动画开始，100%是动画结束，这样的规则就是动画序列*在@keyframs中指定某个CSS样式，会创建当前样式的动画逐渐变为新样式的效果*动画是将元素从一种样式逐渐变为另一种样式的效果，任意数量的样式都可以更改任意次数*使用百分比指定更改发生的时间，或者使用`from`和`to`，等于0%和100%6.代码演示div{width:100px;高度：100px；背景颜色：海蓝宝石；动画名称：移动；动画持续时间：0.5s；}@keyframesmove{0%{transform:translate(0px)}100%{transform:translate(500px,0)}}7.共同属性8.代码演示显示div{width:100px;高度：100px；背景颜色：海蓝宝石；/\*动画名称\*/animation-name:move;/\*动画时长\*/animation-duration:2s;/\*动画速度曲线\*/animation-timing-function:ease-in-out;/\*动画等待执行多长时间\*/animation-delay:2s;/\*指定动画播放次数infinite:infiniteloop\*/animation-iteration-count:infinite;/\*是否向后播放\*/animation-direction:alternate;/\*动画结束后的状态\*/animation-fill-mode:forwards;}div:hover{/\*指定动画是暂停还是播放\*/animation-play-state:paused;}9.动画速记方法/\*animation：动画名称持续时间，运动曲线何时开始播放，是否反转次数。开始和结束状态\*/动画：名称持续时间计时-函数延迟迭代-计数方向填充-模式10。知识点缩略属性不包含animation-paly-state为暂停动画animation-paly-state:paused;经常和鼠标传递等配合使用，让移动动画回来，而不是直接回调：animation-direction:alternate盒子动画结束后停在结束位置：animation-fill-mode:forwardsanimation:move2s线性1s无限交替向前；11.速度曲线细节animation-timing-function：指定动画的速度曲线，默认为ease6.CSS3D转换1.3D转换特性近、大、远小物体和表面遮挡不可见2.三维坐标系统x-axis：水平向右--注：x轴右边为正，左边为负。**注：outside为正值，inside为负值Perspective:perspctive3Dpresentstransfrom-style(2)3Dmovementtranslate3d3Dmovement是在2Dmovement的基础上增加了一个移动方向，即z-axisdirectiontransform:translateX(100px):只在x轴上移动transform:translateY(100px):只在y轴上移动transform:translateZ(100px):只在z轴上移动transform:translate3d(x,y,z):其中x,y,z指的是要移动的轴的方向注：x,y,z对应的值不能省略，也不需要补0(3)。语法变换：translate3d(x,y,z)(4)。代码演示transform:translate3d(100px,100px,100px)/\*注意：x,y,z对应的值不能省略，不需要填0来补\*/transform:translate3d(100px,100px,0)2.Perspective(1)说明如果想让网页产生3D效果需要透视（理解为3D物体投影的2D平面）来真正模仿人的视觉位置，可以看成是安排眼睛看的角度，又称观看距离。所谓视距就是人眼到屏幕的距离，越近视点，在计算机平面上的图像越大，越远，透视单位像素越小（2)透视要点需要写在被检查元素的父框上。注意下图d：是观看距离，观看距离是指人眼到屏幕的距离z：它是z轴，z轴越大（正值），我们看到的物体越大（3）代码演示body{perspective:1000px;}3、translateZ（一）translateZ和perspective的区别perspectve设置了父层级，translateZ为子元素设置了不同的尺寸4、3D旋转rotateX3D旋转是指元素可以沿x轴，y轴旋转,z轴或在三维平面定义要旋转的轴(1)语法transform:rotateX(45deg)--沿x轴正方向旋转45度transform:rotateY(45deg)--旋转45degreesalongthepositivedirectionofthey-axistransform:rotateZ(45deg)--沿着z轴正方向旋转45度transform:rotate3d(x,y,z,45deg)--沿着自定义轴旋转45度作为角度div{perspective:300px;}img{显示：块；边距：100px自动；过渡：全1；}img:hover{transform:rotateX(\-45deg)}(2)左手定则左手大拇指指向x轴正方向其余手指弯曲方向为旋转元素沿x轴方向旋转4、3D旋转rotateYdiv{perspective:500px;}img{显示：块；边距：100px自动；过渡：全1；y轴正方向和其余手指弯曲方向为沿的元素y轴旋转方向（正值）5、3D旋转rotateZdiv{perspective:500px;}img{显示：块；边距：100px自动；过渡：全1；}img:hover{transform:rotateZ(180deg)}(1)rotate3dtransform:rotate3d(x,y,z,deg)--沿自定义轴旋转deg，角度x,y,z表示旋转的向量axis，表示是否要沿轴旋转，最后一个标识旋转角度transform:rotate3d(1,1,0,180deg)--沿对角线旋转45degtransform:rotate3d(1,0,0,180deg)--沿x轴旋转45degdiv{perspective:500px;}img{显示：块；边距：100px自动；过渡：全1；}img:hover{transform:rotate3d(1,1,0,180deg)}6、3D渲染transform-styletransform-stylecontrol元素是否启用三维环境。transform-style:flat表示子元素不启用3D空间。默认的transform-style:preserve-3d子元素打开三维空间。代码是写给parent的，但是影响childbox7、浏览器私有前缀浏览器的私有前缀是为了兼容老版本写的，新版本的浏览器不需要加私有前缀-moz-：代表firefox浏览器私有属性-ms-：代表ie浏览器私有属性-webkit-：代表safari、chrome私有属性-o-：代表Opera私有属性\-moz提倡的写法-边框半径：10px；\-webkit-边框半径：10px；\-o-边框半径：10px；边框半径：10px；