浅析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强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
浅析HTML5中header标签的用法
Jun 24 HTML / CSS
canvas 下载二维码和图片加水印的方法
Mar 21 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
Oct 29 HTML / CSS
HTML5 textarea高度自适应的两种方案
Apr 08 HTML / CSS
recorder.js 基于Html5录音功能的实现
May 26 HTML / CSS
css3实现背景图片颜色修改的多种方式
Apr 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
第四节--构造函数和析构函数
2006/11/16 PHP
数字转英文
2006/12/06 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
php array_map()函数实例用法
2021/03/03 PHP
js 事件小结 表格区别
2007/08/13 Javascript
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
js变量以及其作用域详解
2020/07/18 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
用于deeplink的js方法(判断手机是否安装app)
2014/04/02 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[57:55]EG vs Fnatic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python中关键字is与==的区别简述
2014/07/31 Python
Python运算符重载详解及实例代码
2017/03/07 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
获取Pytorch中间某一层权重或者特征的例子
2019/08/17 Python
flask 实现token机制的示例代码
2019/11/07 Python
opencv3/C++实现视频读取、视频写入
2019/12/11 Python
Pytorch之contiguous的用法
2019/12/31 Python
css3绘制百度的小度熊
2018/10/29 HTML / CSS
什么是事务?为什么需要事务?
2012/01/09 面试题
电子专业推荐信范文
2013/11/18 职场文书
2014年十一国庆向国旗敬礼寄语
2014/04/11 职场文书
户籍证明格式
2014/09/15 职场文书
个人职业及收入证明
2014/10/13 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
博物馆观后感
2015/06/05 职场文书
闪闪红星观后感
2015/06/08 职场文书
《鲁滨逊漂流记》之六读后感(4篇)
2019/09/29 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS