CSS3 变形、过渡、动画、关联属性浅析

一、变形 transform：可以对元素对象进行旋转rotate、缩放scale、移动translate、倾斜skew、矩阵变形matrix。 示例： transform: rotate(90deg) scale(1.5,0.8) translate(100px,50px) skew(45deg,45deg); /*矩阵变形*/ matrix(,,,,,); /*透视*/ perspective(length); transition：过度属性 transition：过度效果的css属性名 过度效果时长 速度效果的速度曲线 过度效果开始时间； transition: property duration timing-function delay;/*示例*/transition:1s ease all;-webkit-tansition:1s ease all;-moz-transition:1s ease all;-o-transition:1s ease all; rotate()：二维空间旋转元素。 若元素设置了perspective值，可用rotate3d()实现三维空间内旋转。 rotateX(angele)/*相当于rotate3d(1,0,0,angle)指定在三维空间内的X轴旋转*/rotateY(angele)/*相当于rotate3d(0,1,0,angle)指定在三维空间内的Y轴旋转*/rotateZ(angele)/*相当于rotate3d(0,0,1,angle)指定在三维空间内的Z轴旋转*/ scale() scaleX()/*只在X轴（水平方向）缩放元素*/scaleY()/*只在Y轴（垂直方向）缩放*/scaleZ()/*只在Z轴缩放，前提：元素设定透视值*/ translate([,])：移动,是位移量。 translateX();/*只在X轴（水平方向）移动*/translateY();/*只在Y轴（垂直方向）移动*/translateZ();/*只在Z轴移动，前提：元素设置透视值*/ skew()：倾斜 skewX();/*只在X轴（水平）倾斜*/skewY();/*只在Y轴（垂直）倾斜*/ matrix(a,c,e,b,d,f)：矩阵变形，c、e的值用正弦或余弦值表示。 a：表示scaleX(); X轴缩放 c：skewY(); Y轴倾斜 e：skewX(); X轴倾斜 b：scaleY(); Y轴缩放 d：translateX() X轴移动 f：translateY() Y轴移动 transform:matrix(,,,,,); perspective()：透视 .wrap{ perspective:1000px; } .wrap .child{ transform:perspective(1000px); } 二、过渡 transition-property：过度的属性 transition-property:all;/*针对所有元素都有过度效果*/transition-property:none;/*没有元素有过度效果*/transition-property:ident;/*指定css属性有过度效果，例如width*/ transition-duration：过度时间 transition-delay：延迟时间，为负数时，过度动作会从该时间点开始显示，之前的动作会被截断。 transition-timing-function：过度效果，默认ease。 transition-timing-function:ease; /*缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔 */transition-timing-function:linear;/* 线性效果，等同于cubic-bezier(0.0,0.0,1.0,1.0)函数 */transition-timing-function:ease-in;/* 渐显效果，等同于cubic-bezier(0.42,0,1.0,1.0)函数 */transition-timing-function:ease-out;/* 渐隐效果，等同于cubic-bezier(0,0,0.58,1.0)函数 */transition-timing-function:ease-in-out;/* 渐显渐隐效果，等同于cubic-bezier(0.42,0,0.58,1.0)函数 */transition-timing-function:cubic-bezier;/* 特殊的立方贝塞尔曲线效果*/ 三、动画 animation-name：动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义，如果提供多个属性值用逗号隔开。 @keyframes相当于一个命名空间，后面跟一个名词，如果在class中的animation-name定义了与之对应的name就可以执行动画。定义动画时可直接使用关键字from和to，从一种状态过度到另一种状态。 .animation_name{ left:0; top:100px; position: absolute; -webkit-animation: 0.5s 0.5s ease infinite alternate; -moz-animation: 0.5s 0.5s ease infinite alternate; -webkit-animation-name:demo; -moz-animation-name:demo; } @-webkit-keyframes demo{ from{left:0;} to{left:400px;} } @-webkit-keyframes demo1{ 0%{left:0;} 50%{left:200px;} 100%{left:400px;} } animation-duration：动画时间 animation-timing-function：播放方式，取值如下： ease：缓解效果，等同于cubic-bezier(0.25,0.1,0.25,1.0)函数，既立方贝塞尔。 linear：线性效果 ease-in：渐显效果 ease-out：渐隐效果 ease-in-out：渐显渐隐效果 step-start：马上跳转到动画结束状态 step-end：保持动画开始状态，到动画执行时间结束，马上跳转到动画结束状态 step([,[start | end]]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性显示，第二个参数默认为end，设置最后一步状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，以animation-fill-mode的设置为动画结束状态。 cubic-bezier(,,,)：特殊的立方赛贝尔曲线效果 animation-delay：开始播放时间 animation-iteration-count：播放次数，取值为infinite时表示无限循环播放 animation-direction：播放方向，取值为： normal：正常方向 reverse：动画反向运行，方向始终与normal相仿 alternate：动画会循环正反交替运动 animation-fill-mode：播放后的状态，取值： none：默认值，不设置 forwards：结束后保持动画结束的状态 backwards：结束后返回动画开始时状态 both：结束后可遵循forwards和backwards两个规则 animation-play-state：检索或设置对象动画的状态，取值： running：默认，运动 paused：暂停 四、关联属性 transform-origin：变形原点，transform的参照点，默认为元素的中心点。有两个参数，参数一为横坐标，参数二为纵坐标。 percentage：用百分比指定坐标值，可负 length：用长度指定坐标值，可负 left center right：水平方向取值 top center bottom：垂直方向取值 perspective-prigin：透视原点，定义在X轴和Y轴的3D元素，允许改变3D元素的底部位置，定义该属性时，它是一个元素的子元素，透视图，而不是元素本身。 注意：使用该属性必须和perspective属性一起用，只影响3D转换的元素。 取值：percentage、length、left、center、right、top、center、bottom backface-visibility：隐藏内容的背面，默认情况下背面可见，反转后变换的内容仍然可见，当backface-visibility设置hidden时，旋转后内容将隐藏，旋转后正面将不再可见。 取值：visible、hidden transform-style：3D呈现，设置内嵌的元素在3D空间如何呈现，有两个值： flat：所有子元素在2D平面呈现 preserve-3d：保留3D空间

本文章由javascript技术分享原创和收集