这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的运用的更多相关文章

  1. CSS Transform / Transition / Animation 属性的区别

    back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...

  2. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  3. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  4. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  5. CSS之transition（动画）

    Transform字面上就是变形,改变的意思.在CSS中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix. 下面我们一 ...

  6. 我想学前端动画-CSS之transition

    Transition属性: 属性 描述 CSS transition 简写属性,用于在一个属性中设置四个过渡属性. 3 transition-property 规定应用过渡的 CSS 属性的名称.默认 ...

  7. CSS动画-transition/animation

    HTML系列: 人人都懂的HTML基础知识-HTML教程(1) HTML元素大全(1) HTML元素大全(2)-表单 CSS系列: CSS基础知识筑基 常用CSS样式属性 CSS选择器大全48式 CS ...

  8. 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)/ ...

  9. css: transform导致文字显示模糊

    css: transform导致文字显示模糊 有人认为模糊的原因是:"transform时div的宽度或者高度并不是偶数,偏移 50% 之后,像素点不是整数,和显示像素没有对上". ...

  10. CSS Transform完全指南 #flight.Archives007

    Title/ CSS Transform完全指南 #flight.Archives007 序: 第7天了! 终身学习, 坚持创作, 为生活埋下微小的信仰. 我是忘我思考,共同进步! 简介: 一篇最简约 ...

随机推荐

  1. linux改变apt-get安装源

    最近自己装了个ubuntu kylin 在使用的过程中发现,系统的apt-get 的源有毛病,总是安装不了软件. 感觉应该是传说中的墙的原因,所以准备换到阿里云的源. 下面是步骤: 1.复制原文件备份 ...

  2. 2018中国大学生程序设计竞赛 - 网络选拔赛 Solution

    A - Buy and Resell 题意:给出n个交易点,每次能够选择买或者卖,求获得最大利润 思路:维护两个优先队列,一个是卖,一个是替换,当价格差相同时,优先替换,因为次数要最少 #includ ...

  3. 2018-2019 ACM-ICPC Nordic Collegiate Programming Contest (NCPC 2018) Solution

    A. Altruistic Amphibians Upsolved. 题意: $有n只青蛙,其属性用三元组表示 <l_i, w_i, h_i> l_i是它能跳的高度,w_i是它的体重,h_ ...

  4. uva11404

    这题说的是给了一个长度为n的字符串(1000)求最长回文子序列,并输出当str[i]==ste[j]时dp[i][j]=dp[i+1][i-1]+2 否则 dp[i][j]=Max(dp[j+1][i ...

  5. SQL: coalesce()函数

    ①用途: 将空值替换成其他值 返回第一个非空值 ②表达式: COALESCE是一个函数, (expression_1, expression_2, ...,expression_n)依次参考各参数表达 ...

  6. 20145221 《Java程序设计》第九周学习总结

    20145221 <Java程序设计>第九周学习总结 教材学习内容总结 整合数据库 JDBC入门 JDBC是用于执行SQL的解决方案,开发人员使用JDBC的标准接口,数据库厂商则对接口进行 ...

  7. Ubuntu Server VS Ubuntu Desktop区别

    今天有位朋友问我,Ubuntu Server 与 Ubuntu Desktop的区别在哪里!区别如下: SERVER没有GUI SERVER没有一堆的桌面软件 SERVER在编译时使用的参数不一样,会 ...

  8. Data caching per request in Owin application

    Data caching per request in Owin application 解答1 Finally I found OwinRequestScopeContext. Very simpl ...

  9. 在Github上搭建博客

    貌似还是这个链接最靠谱呀 http://my.oschina.net/nark/blog/116299   如何利用github建立个人博客:之一 在线编辑器http://markable.in/ed ...

  10. 通过代码来操作SQLite的示例

    Getting started with SQLite in C# http://blog.tigrangasparian.com/2012/02/09/getting-started-with-sq ...