浅析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 用border写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
详解CSS3:overflow属性
Nov 17 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
基于HTML5代码实现折叠菜单附源码下载
Nov 27 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
HTML5 canvas基本绘图之图形组合
Jun 27 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
Jun 03 HTML / CSS
通过canvas转换颜色为RGBA格式及性能问题的解决
Nov 22 HTML / CSS
html5移动端禁止长按图片保存的实现
Apr 20 HTML / CSS
如何解决flex文本溢出问题小结
Jul 15 HTML / CSS
使用CSS实现百叶窗效果示例代码
May 07 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
Yii2简单实现多语言配置的方法
2016/07/23 PHP
Laravel5.1自定义500错误页面示例
2016/10/09 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
JSON 数字排序多字段排序介绍
2013/09/18 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
js获取时间函数及扩展函数的方法
2016/10/30 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
angularJs中orderBy筛选以及filter过滤数据的方法
2018/09/30 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
2020/04/07 Javascript
JS+Canvas实现五子棋游戏
2020/08/26 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
python中定义结构体的方法
2013/03/04 Python
python实现获取客户机上指定文件并传输到服务器的方法
2015/03/16 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python如何基于redis实现ip代理池
2020/01/17 Python
美国专业消费电子及摄影器材网站:B&H Photo Video
2019/12/18 全球购物
德国家具、照明、家居用品网上商店:Wayfair.de
2020/02/13 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
材料物理专业大学毕业生求职信
2013/10/15 职场文书
简历自我评价怎么写呢?
2014/01/06 职场文书
采购人员的个人自我评价
2014/01/16 职场文书
物业保安员岗位职责制度
2014/01/30 职场文书
会计人员岗位职责
2014/03/19 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
邀请函模板
2015/02/02 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
自主招生自荐信格式范文
2015/03/25 职场文书
2015年医生个人工作总结
2015/04/25 职场文书
直播实况, OMG破敌三路五十分钟大战神技局摩托车
2022/04/01 DOTA