1.Rotate2d是指在二维平面上顺时针或逆时针旋转一个元素。使用步骤：给元素添加一个转换属性。transform属性的值为rotate(angle)如transform:rotate(30deg)顺时针旋转30度div{transform:rotate(0deg);}triangulardiv{position:relative;宽度：249px；高度：35px；border:1pxsolid#000;}div::after{content:"";位置：绝对；顶部：8px；右：15px；宽度：10px；高度：10px；border-right:1pxsolid#000;border-bottom:1pxsolid#000;:all0.2s;}/*鼠标经过div内部三角旋转*/div:hover::after{transform:rotate(225deg);}二、设置元素旋转中心点(transform-origin)transform-origin基本语法transform-origin:xy;重要知识点注意后面的参数x和y之间用空格隔开xy默认旋转中心点是元素的中心（50%50%），相当于centercenter你也可以为xy设置像素或者方向名词(top,bottom,left,right,center)rotationcentercasediv{width:200px;高度：200px；背景色：粉色；边距：100px自动；过渡：全1；/*变换原点：左下角；*//*2.默认50%50%相当于centercenter*//*3.可以是px像素*/transform-origin:50px50px;}div:hover{transform:rotate(deg);}3.2D变换的scale，用于控制元素缩放inandout语法transform:scale(x,y)知识点注意用逗号分隔x和ytransform:scale(1,1):宽高加倍，相当于没有缩放transform:scale(2,2):宽度和高度增加一倍。transform:scale(2):如果只写一个参数，第二个参数会和第一个参数一样。transform:scale(0.5,0.5):scaledownthemaximum优点：可以设置变换中心点缩放，默认是按中心点缩放，不影响其他框代码演示div:hover{/*注意数字是倍数，所以不需要加单位*//*transform:scale(2,2)*//*实现比例缩放，同时修改宽高*//*transform:scale(2)*//*小于1等于缩放*/transform:scale(0.5,0.5)}四、2DTransformation综合书写和顺序知识点同时使用多个变换，格式为transform:translate()rotate()scale()的顺序会影响变换的效果（先旋转会改变坐标轴的方向），但是我们有position或者其他属性，把位移放在前面代码演示div:hover{变换：平移（200px，0）旋转（360deg)scale(1.2)}五、动画（animation）什么是动画？动画是CSS3中最具颠覆性的特性之一。通过设置多个节点可以精确控制一个或一组动画，从而实现复杂的动画效果动画的基本使用先定义动画，调用定义的动画语法格式（定义动画）@keyframes动画名称{0%{宽度：100px；}100%{width:200px}}语法格式（使用动画）div{/*调用动画*/animation-name：动画名称；/*持续时间*/动画持续时间：持续时间；}animationsequence0%是动画开始，100%是动画结束，这样的规则是动画序列在@keyframs中规定了某种CSS样式，则创建当前样式的动画效果并逐渐改变为一种新的风格。动画是将元素从一种样式逐渐更改为另一种样式的效果。你可以随意更改样式，并使用百分比指定更改发生的时间，或者使用from和to，相当于0%和100%代码演示6.动画常用属性常用属性代码演示div{width:100px;高度：100px；背景颜色：海蓝宝石；/*动画名称*/animation-name:move;/*动画时长*/animation-duration:2s;/*动画速度曲线*/animation-timing函数：缓入缓出；/*等待动画执行的时间*/animation-delay:2s;/*指定动画播放的次数infinite:infiniteloop*/animation-iteration-count:infinite;/*是否逆行播放*/animation-direction:alternate;/*动画结束后的状态*/animation-fill-mode:forwards;}div:hover{/*指定动画是暂停还是播放*/animation-play-state:paused;}7.动画速记方法Animation简写方法/*animation：动画名称持续时间，运动曲线开始播放的时间，是否反转的次数。开始和结束状态*/animation:namedurationtiming-functiondelayiteration-countdirectionfill-mode知识点简写属性不包括animation-paly-state来暂停动画animation-paly-state:paused;常与鼠标传递等配合使用，使动画返回而不是直接回调：animation-direction:alternate方框动画结束后，停在结束位置：animation-fill-mode:forwards代码演示动画：向前移动2s线性1s无限交替；8.速度曲线细节速度曲线细节animation-timing-function：指定动画的速度曲线，默认为easecodedemodiv{width:0px;高度：50px；行高：50px；空白：nowrap；溢出：隐藏；背景颜色：海蓝宝石；动画：向前移动4ssteps(24);}@keyframesmove{0%{width:0px;}100%{宽度：480px；}}
