浅析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混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3旋转——彩色扇子兼容firefox浏览器
Jun 04 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
CSS Houdini实现动态波浪纹效果
Jul 30 HTML / CSS
基于html5实现的图片墙效果
Oct 16 HTML / CSS
HTML5移动端手机网站开发流程
Apr 25 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
常用的HTML5列表标签
Jun 20 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 HTML / CSS
amazeui页面校验功能的实现代码
Aug 24 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
js的一些常用方法小结
2011/06/29 Javascript
js动态创建、删除表格示例代码
2013/08/07 Javascript
javascript将浮点数转换成整数的三个方法
2014/06/23 Javascript
window.open()实现post传递参数
2015/03/12 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
如何测量vue应用运行时的性能
2019/06/21 Javascript
微信用户访问小程序的登录过程详解
2019/09/20 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
让python json encode datetime类型
2010/12/28 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
2018/01/09 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
通过实例了解python property属性
2019/11/01 Python
Python输出指定字符串的方法
2020/02/06 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
html5指南-1.html5全局属性(html5 global attributes)深入理解
2013/01/07 HTML / CSS
加拿大最大的钻石商店:Peoples Jewellers
2018/01/01 全球购物
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
医学专业五年以上个人求职信
2013/12/03 职场文书
平民服装店创业计划书
2014/01/17 职场文书
党员干部一句话承诺
2014/05/30 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
学校食堂标语
2014/10/06 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
趣味运动会赞词
2015/07/22 职场文书
初中物理教学反思
2016/02/19 职场文书
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技