浅析CSS3 中的 transition,transform,translate之间区别和作用


Posted in HTML / CSS onMarch 26, 2020

transform 和 translate

transform指变换、变形,是css3的一个属性,和其他width,height属性一样

translate 是transform的属性值,是指元素进行2D变换,2D变换就是指,元素以当前位置(0,0)按照x轴的方向移动多少,按照y轴的方向移动多少

例如:

transform:translate(0,100%) 表示从元素的当前位置延y轴方向,向下移动整个元素高度的距离

transform:translate(-20px,0) 表示从元素的当前位置延x轴方向,向左移动20px

transform 有很多其它属性值,translate3D(3D变换),scale(2D缩放)等其他的变换方式。

transition 

transition  在一定时间之内,一组css属性变换到另一组属性的动画展示过程。可以用来实现动态效果,css3的属性

语法 transition:需要变换的属性 变换需要的时间 控制动画速度变化 延期多少时间后开始执行

transition属性写在最初的样式里,而不是放在结束的样式里,即定义动画开始之前的元素外观的样式。只需要给元素设置一次transition,浏览器就会负责以动画展示从一个样式到另一个样式。

例如:

transition:width 2s;

transition:translate 2s;

transtion:all 2s。

总结

到此这篇关于CSS3 中的 transition,transform,translate之间区别和作用的文章就介绍到这了,更多相关css3 transition transform translate内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3属性background-size使用指南
Dec 09 HTML / CSS
CSS3实现多重边框的方法总结
May 31 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
在HTML5 canvas里用卷积核进行图像处理的方法
May 02 HTML / CSS
Html5实现iPhone开机界面示例代码
Jun 30 HTML / CSS
很酷的HTML5电子书翻页动画特效
Feb 25 HTML / CSS
HTML5 新标签全部总汇(推荐)
Jun 13 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
Aug 04 HTML / CSS
html5超简单的localStorage实现记住密码的功能实现
Sep 07 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
canvas 橡皮筋式线条绘图应用方法
Feb 13 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 #HTML / CSS
CSS3 不定高宽垂直水平居中的几种方式
Mar 26 #HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 #HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 #HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 #HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 #HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 #HTML / CSS
You might like
简单的用PHP编写的导航条程序
2006/10/09 PHP
php学习笔记之 函数声明(二)
2011/06/09 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
yii添删改查实例
2015/11/16 PHP
Yii2超好用的日期和时间组件(值得收藏)
2016/05/05 PHP
实现PHP搜索加分页
2016/10/12 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
JS 去前后空格大全(IE9亲测)
2013/07/15 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
js和jquery中循环的退出和继续下一个循环
2014/09/03 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[01:19]2014DOTA2国际邀请赛 采访TITAN战队ohaiyo 能赢DK很幸运
2014/07/12 DOTA
Python多进程同步Lock、Semaphore、Event实例
2014/11/21 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
质检部部长职责
2013/12/16 职场文书
考试退步检讨书
2014/01/15 职场文书
承诺书怎么写
2014/03/26 职场文书
社会公德演讲稿
2014/05/20 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2014年体育教师工作总结
2014/12/03 职场文书
教师节晚会主持词
2015/06/30 职场文书
2016校本研修培训心得体会
2016/01/08 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
css3实现背景图片颜色修改的多种方式
2021/04/13 HTML / CSS
python必学知识之文件操作(建议收藏)
2021/05/30 Python
电频谱管理的原则是什么
2022/02/18 无线电