transform 用于实现变形形变位不变IE8及以下不支持元素本身的位置大小、坐标没有发生变化并且不占位Transformtranslate | scale | skew | rotate功能transform主要是用来对元素进行2d或3d变换的Translate是用来做位移的Scale是用于缩放的Skew是用于倾斜的Rotate是用于旋转的直接使用以上属性是2d变换在单词后面加上3d是做3d变换1. transform:skew()/skewX()/skewY();skew:用于完成倾斜扭曲deg表示度数默认情况下表示x轴倾斜x y 不区分大小写skew(15deg,30deg)两个参数表示x y轴同时变形skew不支持z轴。最多只能传两个参数2. transformrotate(45deg) 默认是Z轴rotate用于旋转,单位degtransformrotateX(45deg)沿x轴水平旋转transformrotateY45deg沿Y轴垂直旋转transformrotateZ45deg沿Z轴旋转3. transform:scale:表示缩放transform:scale(2)表示宽度和高度一起缩放transform:scaleX(2)transform:scale(2,1):表示宽度为原来的2倍transform:scaleY(2)transform:scale(1,2):表示高度为原来的2倍4. transform:translate 位移如果只有一个值默认表示X轴位移X轴正值表示向右移动负值表示向左移动Y轴正值表示向下移动负值表示向上移动transform:translateX(300px)表示元素向右移动300pxtranslateY(200px)translate(0,200px)表示元素向下移动200pxtransform 用于实现变形形变位不变IE8及以下不支持元素本身的位置大小、坐标没有发生变化并且不占位Transformtranslate | scale | skew | rotate功能transform主要是用来对元素进行2d或3d变换的Translate是用来做位移的Scale是用于缩放的Skew是用于倾斜的Rotate是用于旋转的直接使用以上属性是2d变换在单词后面加上3d是做3d变换1. transform:skew()/skewX()/skewY();skew:用于完成倾斜扭曲deg表示度数默认情况下表示x轴倾斜x y 不区分大小写skew(15deg,30deg)两个参数表示x y轴同时变形skew不支持z轴。最多只能传两个参数2. transformrotate(45deg) 默认是Z轴rotate用于旋转,单位degtransformrotateX(45deg)沿x轴水平旋转transformrotateY45deg沿Y轴垂直旋转transformrotateZ45deg沿Z轴旋转3. transform:scale:表示缩放transform:scale(2)表示宽度和高度一起缩放transform:scaleX(2)transform:scale(2,1):表示宽度为原来的2倍transform:scaleY(2)transform:scale(1,2):表示高度为原来的2倍4. transform:translate 位移如果只有一个值默认表示X轴位移X轴正值表示向右移动负值表示向左移动Y轴正值表示向下移动负值表示向上移动transform:translateX(300px)表示元素向右移动300pxtranslateY(200px)translate(0,200px)表示元素向下移动200pxanimation 动画自执行 用于实现关键帧动画式的风格-webkit-animationname duration timing-function delay iteration-count direction fill-mode play-state1.animation-name 用来定义一个动画的名称transition-name相同2.animation-duration 用来指定元素播放动画所持续的时间单位s秒其默认值是“0”transition-duration 相同3.animation-timing-function动画的播放方法transition-easing相同4.animation-delay:动画的延迟时间5.animation-iteration-count具体数值;:动画执行的次数infinite表示无限循环6.animation-direction:表示动画执行方向 alternate 表示正反交替normal:表示正常状态 反向reverse7.animation-fill-mode: 用于设置动画结束后的停留点forwards:表示停留在最后一个点上 backwards:表示停留在第一个点上默认值:none both:介于最后和开始之间/动画结束或开始的状态8.animation-play-state: paused(动画已暂停)|running(动画正在播放);关键帧动画必须由keyframes来引出keyframes 动画名称(name){执行代码块0%from 100%to[关键帧动画的单位必须是百分比]}关键帧动画可以设置不同时段的百分比效果transition与animation区别transition: 过渡平滑的动画 最多4个参数 最少1个allanimation: 关键帧 最长8个参数 最少2个Eg:style * { margin: 0; padding: 0; } #box { width: 300px; height: 300px; background: #0f0; margin: 100px auto; animation: run 3s linear 2s running; /* animation: name duration timing-function delay iteration-count direction fill-mode play-state; */ } keyframes run { form { transform: rotateZ(0deg); } 20% { transform: rotateZ(2deg); } 40% { transform: rotateZ(40deg); } 60% { transform: rotateZ(60deg); } 80% { transform: rotateZ(80deg); } to { transform: rotateZ(100deg); } } /style
)
