transition动画与transform变换（了解

1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、属性连写:transition: property duration timing-function delay 同时设置四个属性

width:200px;
height:200px;
background: red;

/*transition-property: width;
           transition-duration:2s;
           transition-timing-function:linear;
           transition-delay: 2s;*/

/*transition:width 1s linear,height 1s linear,background-color 1s linear;*/

transition: all 3s ease;
}

.box:hover{

width:500px;
height: 50px;
background-color: green;
}

transform变换

形变效果

1.translate(x,y) 设置盒子位移
2.scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
spective 设置透视距离

/*transform 形变属性缩放平移旋转*/
            /*transform:scale(2,2);*/
            /*transform:translate(0,200px);*/
            /*transform: rotate(45deg);*/
            /*transform:rotateX(180deg);*/

/*perspective(800px)3d透视效果*/
/*transform:perspective(800px) rotateY(45deg);*/

/*//斜切*/
transform: skew(30deg,45deg);

}

设置形变中心

tranform-origin设置变形的中心点,接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right

三维形变

translateX、translateY、translateZ 设置三维移动
rotateX、rotateY、rotateZ 设置三维旋转
scaleX、scaleY、scaleZ 设置三维缩放

设置盒子背景是否可见

backface-visibility设置盒子背面是否可见

设置盒子是否按照3d展示

transform-styleflat | preserve-3d 设置盒子是否按3d空间显示

/*backface-visibility: hidden;*/

/*是否已3d的空间展示效果*/
/*transform-style: flat;*/

transition动画与transform变换（了解相关推荐

css 右上角翻开动画_CSS3 transition动画、transform变换、animation动画
一.CSS3 transition动画 transition可以实现动态效果,实际上是一定时间之内,一组css属性变换到另一组属性的动画展示过程. 属性参数: 1.transition-propert ...
css3动画模块transform transition animation属性解释
首先来看下对各大浏览器的兼容性 IE Firefox Safari Chrome Opera CSS 2D Transform no 3.5 3.2 2.0 10.5 CSS 3D Transfo ...
css3-12 transition+css或transform实现过渡动画
css3-12 transition+css或transform实现过渡动画一.总结一句话总结:首先要设置hover后的效果,然后在transition里面指定执行哪些样式和执行时间为多长. 1. ...
No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述作业提交截止时间:09-01 任务目的深度理解掌握 transition-timing-function 以及它的意义学会配合使用 CSS transform 和CSS transiti ...
java rotatetransition_transition过渡，transform变换
transition 过渡 transition:transition-property transition-duration transition-timing-function transiti ...
移动端 transition动画函数的封装（仿Zepto）以及 requestAnimationFrame动画函数封装（仿jQuery）...
移动端 css3 transition 动画 ,requestAnimationFrame 动画对于性能的要求,h5优先考虑: 移动端单页有时候制作只用到简单的css3动画即可,我们封装一下, ...
详解如何用 CSS3 完成 3D transform变换
Tips:阅读提示!!! 首先,本文针对的是3D transform变换的学习,所以你需要对 2D transform变换有一定的了解其次,需要说明的是,代码是一种需要自己不断实践的学科,建议各位 ...
html图片旋转换图片,5. CSS3 transform变换、翻转图片示例
仅供学习,转载请注明出处 CSS3 transform变换 1.translate(x,y) 设置盒子位移 2.scale(x,y) 设置盒子缩放 3.rotate(deg) 设置盒子旋转 4.ske ...

transition动画与transform变换（了解

transition动画与transform变换（了解相关推荐

最新文章

热门文章