浅析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美化表单控件全集
Jun 29 HTML / CSS
CSS3教程(6):创建网站多列
Apr 02 HTML / CSS
需要知道的CSS3动画技术
Jan 01 HTML / CSS
前端隐藏出边界内容的实现方法
Apr 14 HTML / CSS
浅谈CSS3动画的回调处理
Jul 21 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
Apr 24 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
Jun 17 HTML / CSS
基于HTML5+CSS3实现简单的时钟效果
Sep 11 HTML / CSS
canvas绘制圆角头像的实现方法
Jan 17 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 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中strlen和mb_strlen的区别
2014/08/31 PHP
php的XML文件解释类应用实例
2014/09/22 PHP
php去除数组中重复数据
2014/11/18 PHP
微信支付PHP SDK ―― 公众号支付代码详解
2016/09/13 PHP
PHP中SESSION过期设置
2021/03/09 PHP
基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼
2006/12/06 Javascript
javascript 延迟加载技术(lazyload)简单实现
2011/01/17 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
JavaScript中定义类的方式详解
2016/01/07 Javascript
vue+vuex+axios实现登录、注册页权限拦截
2018/03/09 Javascript
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
JS阻止事件冒泡的方法详解
2019/08/26 Javascript
Layui Table js 模拟选中checkbox的例子
2019/09/03 Javascript
js实现GIF动图分解成多帧图片上传
2019/10/24 Javascript
python实现在无须过多援引的情况下创建字典的方法
2014/09/25 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python输出\u编码将其转换成中文的实例
2018/12/15 Python
Python2和Python3之间的str处理方式导致乱码的讲解
2019/01/03 Python
django用户登录验证的完整示例代码
2019/07/21 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
英国领先的互联网葡萄酒礼品商:Vintage Wine & Port
2019/05/24 全球购物
培训主管的岗位职责
2013/11/23 职场文书
学生处主任岗位职责
2013/12/01 职场文书
自我鉴定四大框架
2014/01/17 职场文书
小学班主任培训方案
2014/06/04 职场文书
医院义诊活动总结
2014/07/04 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
导游词之白茶谷九龙峡
2019/10/23 职场文书
世界十大狙击步枪排行榜
2022/03/20 杂记
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js