关于CSS:transform、transition的运用
这3个属性是CSS3新增的属性，功能极其强大，能完成许多以往JS才能完成的页面动态效果，而且运行效率非常高，考虑到浏览器兼容性问题，应在3个属性前面加上各浏览器的前缀。以下思维导图介绍了3个属性的各属性值及其代表的意义，请仔细阅读。
一、transform 变换样式
1.transform:translate(x,y) 2D平移
2.transform:translateX(x) 水平方向上的平移
3.transform:translateY(y) 垂直方向上的平移
取值：x,y=px 或%
当translate中的x或y=0时，也能有水平或垂直方向上的平移，0不可省略。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #ccc;
transform:translate(100px,50%);/* 水平方向上平移100px,垂直方向上平移元素的50%，即50px */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果演示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #ccc;
transform:translateX(100px);/* 水平方向上平移100px*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果演示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #ccc;
transform:translateY(50%);/*垂直方向上平移元素的50%，即50px */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
演示结果
2.transform-origin 设置元素中心点
如元素rotate时需要参考一个基点，而origin就是用来设置这个点，若不设置，默认中心点在x和y方向上的50%处。
3.transform-rotate 设置元素2D旋转
取值：角度值(deg)，可为负值
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #ccc;
-webkit-transform-origin:0,0;
-webkit-transform:rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
演示结果
初始状态 设置rotate后的状态
3.transform:slace(x,y) 设置元素2D缩放
取值：可保留一位小数点的整数，可为负值，结果取其绝对值。若只填一个参数，默认y=x。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #ccc;
-webkit-transform:scale(1);
/*-webkit-transform:scale(2);*/ /*放大两倍*/
/*-webkit-transform:scale(-0.5);*/ /*缩小0.5倍*/
/*-webkit-transform:scale(1,2)*/ /*x方向不缩放，y方向放大两倍*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>
演示结果
scale(1) scale(2) scale(-0.5) scale(1,2)
4.transform:skew(x,y) 斜切扭曲
transform:skewX()
transform:skewY()
取值：角度在（deg）,与scale一样，可在x,y方向上进行变化，不同的是，若只填一个参数，默认y=0。先上两张原理图，注意角度的起始边和终止边。
skew(10deg) / skewX(10deg) skew(0,10deg) / skewY(10deg)
5.transform:translate3d(x,y,z) 控制元素3D平移
取值：px,%
二、transition 过渡效果
1.用法介绍：
a.定义元素默认样式
b.定义元素最终样式及触发条件
c.在默认样式中添加transition属性和方法
2.transition-porperty 需要过渡的属性
取值：porperty(属性名) 或 all(全部属性)
3.transition-duration 过渡时间
取值：number(s)
4.transition-timing-function 过渡速度(也称作过渡函数)
取值：ease 默认值，逐渐变慢
linear 匀速
ease-in 加速过渡
ease-out 减速过渡
ease-in-out 先加速然后减速
cubic-bezier(n,n,n,n) 自定义，n=[0,1]
5.transition-delay 过渡延迟
取值：number(s)，无延时可省略
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
div{
width: 100px;
height: 100px;
background-color: #f00;
margin:200px;
transform-origin:0px,0px;
-webkit-transform:rotate(0deg); /*以上为设置初始状态*/
-webkit-transition-property:all; /*选定全部属性*/
-webkit-transition-duration:0.8s; /*过渡时间为0.8s*/
-webkit-transition-timing-function:linear; /*匀速过渡*/
-webkit-transition-delay:0.2s; /*延迟0.2s后执行*/
}
div:hover{ /*设置鼠标经过时触发过渡效果，以下为元素最终状态*/
width: 200px;
height: 150px;
-webkit-transform:rotate(30deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
演示结果
6.语法缩写：
transition:property | duration | timing-function | delay;
以上代码可缩写为 eg: transition:all .8s linear .2;
关于CSS:transform、transition的运用的更多相关文章
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...
- CSS之transition（动画）
Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...
- 我想学前端动画-CSS之transition
Transition属性: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS 属性的名称.默认 ...
- CSS动画-transition/animation
HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...
- Html CSS transform matrix3d 3D转场特效
Html CSS transform matrix3d 3D转场特效 透视矩阵 2n/(r-l) 0 (r+l)/(r-l) 0 0 2n/(t-b) (t+b)/(t-b) 0 0 0 (n+f)/ ...
- css: transform导致文字显示模糊
css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...
- CSS Transform完全指南 #flight.Archives007
Title/ CSS Transform完全指南 #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: 一篇最简约 ...
随机推荐
- （21）纹理缓存（Texture Cache）
简介 纹理缓存是将纹理缓存起来方便之后的绘制工作.每一个缓存的图像的大小,颜色和区域范围都是可以被修改的.这些信息都是存储在内存中的,不用在每一次绘制的时候都发送给GPU. CCTextureCach ...
- 文件下载—SSM框架文件下载
1.准备上传下载的api组件 <dependency> <groupId>commons-io</groupId> <artifactId>common ...
- “4K云字库”基本框架图
"4K云字库"基本框架图 谷歌的web-font,令"云字库"成为IT热点. 云字库,只是云计算的一个细小分支 ,而云计算的基础,是"大数据& ...
- PHP保存Base64图片base64_decode的问题 文件打不开的问题
PHP对Base64的支持非常好,有内置的base64_encode与base64_decode负责图片的Base64编码与解码. 编码上,只要将图片流读取到,而后使用base64_encode进 ...
- INNODB锁（2）
在上一篇文章写了锁的基本概述以及行锁的三种形式,这一篇的主要内容如下: 一致性非锁定读 自增长与锁 外键和锁 一致性性非锁定读 一致性非锁定读是InnoDB通过多版本并发控制(MVCC,multi v ...
- Vue学习笔记之vue-cli脚手架项目中组件的使用
在webpack-simple模板中,包括webpck模板.一个.vue文件就是一个组件. 为什么会这样呢?因为webpack干活了!webpack的将我们所有的资源文件进行打包.同时webpack还 ...
- 《JDK 8.0 学习笔记》1~3章
第一章 Java平台概论 了解Java的发展历程和相关术语如JDK.JVM.JRE等 第二章 从JDK到IDE 书本介绍了新建Java程序的注意事项以及在cmd和Eclipse环境下如何运行Java, ...
- 【转载】Java关键字之"transient"
原文出处:http://blog.csdn.net/lanxuezaipiao/article/details/16358677 transient的作用及使用方法 我们都知道一个对象只要实现了Ser ...
- linux shell执行原理
shell简介 Shell是系统的用户界面,提供了用户与内核进行交互操作的一种接口.它接收用户输入的命令并把它送入内核去执行. 运行背景 a 一个基本的linux系统结构 b.由上图可以看出,shel ...
- 51nod-1055-最长等差数列(dp+优化)
1055 最长等差数列 基准时间限制:2 秒 空间限制:262144 KB 分值: 80 难度:5级算法题 收藏 关注 N个不同的正整数,找出由这些数组成的最长的等差数列. 例如:1 3 ...