关于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天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: 一篇最简约 ...
随机推荐
- 5.6 Components -- Handling User Interaction with Actions
1. 组件允许你定义可以在整个应用程序中重用的控件.如果它们够通用,它们也可以在被共享给其他人并且在许多应用程序中被使用. 2. 为了使一个可重用的控件有用,然而,你首先需要你的应用程序的用户和它交互 ...
- Hadoop HDFS的Shell操作实例
本文发表于本人博客. 我们知道HDFS是Hadoop的分布式文件系统,那既然是文件系统那最起码会有管理文件.文件夹之类的功能吧,这个类似我们的Windows操作系统一样的吧,创建.修改.删除.移动.复 ...
- 92. Reverse Linked List II（链表部分反转）
Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1-> ...
- 2018-2019 ACM-ICPC Southeastern European Regional Programming Contest (SEERC 2018) Solution
A. Numbers Unsolved. B. Broken Watch Solved. 题意: 一个圆盘上,有等分的n块区域,有三根指针,当三根指针分别位于两块区域的交界处时 指针的三点相连会形成一 ...
- Linux 查看系统所有用户
grep bash /etc/passwd Linux 查看系统所有用户
- 【MDCC 2015】开源选型之Android三大图片缓存原理、特性对比
摘要:这是快的打车移动端架构师.Android 开源项目源码解析codeKK发起人 吴更新(@Trinea)在MDCC上分享的内容,从总体设计和原理上对几个图片缓存进行对比,没用到它们的朋友也可以了解 ...
- linux时区问题
时区问题很麻烦- 0.查看时间命令 #date 查看系统时间 #date -s 修改时间,看下面的例子 #// (将系统日期设定为2014年07月16日) #:: (将系统时间设定为下午11::) # ...
- windows 10占用cpu和内存过高
自从安装了windows 10,开机之后cpu和内存一直占用很高,尤其是system进程,一直占cpu在13%左右,上网查到一个解决方式,如下: cpu瞬间变为1%
- Codeforces Round #390 (Div. 2) C. Vladik and chat（dp）
http://codeforces.com/contest/754/problem/C C. Vladik and chat time limit per test 2 seconds memory ...
- 强大的XML
2018-04-23 20:29:26 XML:Extensible Markup Language,也就是可扩展标记语言.XML和HTML格式是古老的标记通用语言SGML的衍生语言. XML文件是可 ...