浅析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教程(8):CSS3透明度指南
Apr 02 HTML / CSS
CSS3 简写animation
May 10 HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 HTML / CSS
CSS3 制作旋转的大风车(充满童年回忆)
Jan 30 HTML / CSS
css3 transform属性详解
Sep 30 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
CSS3制作3D立方体loading特效
Nov 09 HTML / CSS
详解使用canvas保存网页为pdf文件支持跨域
Nov 23 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 HTML / CSS
Html5新增标签有哪些
Apr 13 HTML / CSS
移动端HTML5开发神器之vconsole详解
Dec 15 HTML / CSS
CSS代码检查工具stylelint的使用方法详解
Mar 27 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 email邮箱正则
2008/10/08 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
详解PHP中的 input属性(隐藏 只读 限制)
2017/08/14 PHP
PHP echo()函数讲解
2019/02/15 PHP
微信支付之JSAPI公众号支付详解
2019/05/15 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
利用Angular.js限制textarea输入的字数
2016/10/20 Javascript
Bootstrap的基本应用要点浅析
2016/12/19 Javascript
js简单实现网页换肤功能
2017/04/07 Javascript
JS实现带导航城市列表以及输入搜索功能
2018/01/04 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
vue与iframe之间的信息交互的实现
2020/04/08 Javascript
JavaScript 禁止用户保存图片的实现代码
2020/04/28 Javascript
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
在PyCharm中实现关闭一个死循环程序的方法
2018/11/29 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python CSV文件模块的使用案例分析
2019/12/21 Python
tensorflow2.0与tensorflow1.0的性能区别介绍
2020/02/07 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
canvas如何实现多张图片编辑的图片编辑器
2020/03/10 HTML / CSS
波兰最大的电商平台:Allegro.pl
2021/02/06 全球购物
ORACLE十问
2015/04/20 面试题
精彩自我鉴定
2014/01/16 职场文书
教师个人读书活动总结
2014/07/08 职场文书
二年级学生期末评语
2014/12/26 职场文书
小班下学期幼儿评语
2014/12/30 职场文书
会计实训总结范文
2015/08/03 职场文书
你为什么是穷人?可能是这5个缺点造成
2019/07/11 职场文书
python数据库批量插入数据的实现(executemany的使用)
2021/04/30 Python
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers