transition、trasform和translate

学习css的时候，有时候用到这三个概念，写的时候经常会写混，现在对这三个东西作一个归纳总结。

transition----过渡

transition表示的是一种属性的改变，可以在一定的时间内实现元素的状态过渡为最终状态，用于模拟一种过渡动画效果。transition有以下属性：

transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。

接下来用一个实例说明transition的用法：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:400px;
height:400px;
margin-left:20px;
mergin-top:150px;
transition:margin-left 3s;
-moz-transition:width 3s;
-webkit-transition:width3s;
-o-transition:width 3s; //这个属性在低版本的ie中不会显现
}div:hover
{margin-left:300px;
}
</style>
</head>
<body><div></div>
<p>鼠标放到div上，div会向右移动</p>
</body>
</html>

transform-----转换,变形

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。这个转换是静态的，固定在远处保持转换之后的样子。常用的属性有以下几类：

translate（X,Y）用于规定元素在X,Y轴方向上的偏移（3d时还包括了z轴上的偏移）
rotate (deg) 用于规定元素在自己位置上旋转的角度（逆时针的deg）
scale 用于规定元素在宽度和高度上的倍数（把元素的大小以倍数的形式放大缩小）
skew 用于规定元素在X,Y轴上的倾斜的角度
matrix 合并了多个转换的方法

具体的参数以及实例可以参照Html中文网

实例内容（采自菜鸟教程）：

width="100%" height="300" src="https://c.runoob.com/iframe/3391" allowfullscreen="allowfullscreen">

translate—转换

看到这里，大家应该已经明白了，translate并不是一个特有的大类，translate其实是transform的一个转换的属性，属于transform的一种实现，包含在transform当中

transition、trasform和translate相关推荐

程序员专属的新年祝福原来是这样的! (附中奖名单)
程序员的新年祝福会是什么样的?我们共收到了97位 OSCer 的回复,以下为支持数排名前十的祝福语: @yale8848(支持数:10) document.write("") (小 ...
CSS3动画详解（图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言本文主要内容: 过渡:transition 2D 转换 trans ...
html笔记（五）2D、3D、3D动画
大标题小节一.2D 1. css3 渐变的语法及应用 2. 动画过渡:transition 3. 2D转换属性:transform 二.3D 1. 3D转换 2. 3D视距 3. 3D翻转方法 4 ...
CSS3属性详解：动画详解
前言本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation 过渡:transition transition的中文含义是 ...
92款超级漂亮的css按钮样式复制即用
样式如图,代码已在结尾,按照序号复制粘贴便可直接用了: 代码: <ul><li><div class="button-wrapper" data-ti ...
前端寒假css（100-181）
文章目录 H5新增 100基础与语法 101语义化标签 102(103)音频,视频标签 controls:控制栏(有它才显示) loop循环 autoplay 自动播放 muted静音表单(105- ...
a java rnvironme_分析113个前缀在各大考纲词汇中的作用（一）
CET4.CET6.GRE.IELTS.TOEFL.考研英语总的词汇量为14055,分析前缀数为113,有5526个单词分布在这些前缀中,剩下的8529个词汇没有任何前缀信息. superword是一 ...
实现单选框的css,7款纯CSS实现不错的自定义单选框
CSS 语言: CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Raleway:400,500,700); *, *::af ...
前端开发：Html5和CSS3
1)Html5详解. 2)CSS3选择器详解. 3)CSS3属性详解(图文教程). 4)CSS预处理器之Less详解. 什么是 HTML5 HTML5并不仅仅只是做为HTML标记语言的一个最新版本,更 ...

transition、trasform和translate

transition----过渡

transform-----转换,变形

translate—转换

transition、trasform和translate相关推荐

最新文章

热门文章