这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. cocos代码研究（23）Widget子类ScrollView学习笔记

    基础理论 一个能够被用户触摸滚动的一个层次型布局容器视图,允许其尺寸大于屏幕显示的物理尺寸,其内部维护有一个布局用于水平的或垂直的存放子节点.继承自 Layout,被 ListView 继承. 代码实 ...

  2. linux下高并发网络应用注意事项

    本文转自:http://www.blogjava.net/bacoo/archive/2012/06/11/380500.html linux下高并发网络应用注意事项 vi /etc/sysctl.c ...

  3. react 项目微信端 签名失败 原因

    用SPA做微信h5,调用微信jssdk的页面,安卓微信上木有问题,ios微信报当前url未注册 经过调试,是ios微信版本问题导致页面跳转url未变化,导致验签失败 所以我们大致的思想就是:在ios微 ...

  4. 五,动态库(dll)的封装与使用

    在项目开发中,我们经常会使用到动态库(dll),要么是使用别人的动态库,要么是将功能函数封装为动态库给别人用.那么如何封装和使用动态库呢?以下内容为你讲解. 1.动态库的封装 以vs2010为例,我们 ...

  5. Python3.x：免费代理ip的批量获取并入库

    Python3.x:免费代理ip的批量获取并入库 一.简介 网络爬虫的世界,向来都是一场精彩的攻防战.现在许多网站的反爬虫机制在不断的完善,其中最令人头疼的,莫过于直接封锁你的ip.但是道高一尺魔高一 ...

  6. Win7系统（台式机）设置系统的窗口背景色（豆沙绿色）

    Win7系统(台式机)设置系统的窗口背景色(豆沙绿色) 1,桌面->右键->个性化->窗口颜色->高级外观设置->项目选择(窗口).颜色1(L)选择(其它)将色调改为:8 ...

  7. Tensorflow代码解析（一）

    http://www.leiphone.com/news/201702/n0uj58iHaNpW9RJG.html?utm_source=tuicool&utm_medium=referral ...

  8. What's the difference between SDK and Runtime in .NET Core?

    What's the difference between SDK and Runtime in .NET Core? Answer1 According to the .Net Core Guide ...

  9. 通过委托来实现异步 Delegate的BeginInvoke和EndInvoke

    什么是.net的异步机制呢? 解释这个话题之前,先让我们来看看同步执行的程序 https://github.com/chucklu/Test/blob/master/DotNet4.5开发指南/并行处 ...

  10. 【查看内存】Linux查看内存使用情况（二）

    Linux查看CPU和内存使用情况:http://www.cnblogs.com/xd502djj/archive/2011/03/01/1968041.html 在做Linux系统优化的时候,物理内 ...