这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. 89. Gray Code(公式题)

    The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...

  2. 34sqlite

    sqlite,本地数据库.主要运用在小型的程序,传送方便(如发送附带数据库的程序,但MySQL有点大,或许没安装). 如何创建本地数据库? 1.新建一个.txt的文本文件. 2.直接将后缀名有.txt ...

  3. ac自动机系列

    hdu2222这题说的是在一个1000000的长串中找出n个短串是否在其中出现过 最后输出在长串中出现的个数 #include <iostream> #include <cstdio ...

  4. python 中使用ConfigParser类修改配置文件

    配置文件的格式: [user] user_ip=127.0.0.1 user_name=testuser user_id=13 import ConfigParser conf = ConfigPar ...

  5. netty4.1.6源码2-------创建服务端的channel

    1. netty在哪里调用jdk底层的socket去创建netty服务端的socket. 2. 在哪里accept连接. 服务端的启动: 1. 调用jdk底层的api去创建jdk的服务端的channe ...

  6. Ubuntu16.04桌面系统如何配置和启动wireshark

    上一篇介绍了在Ubuntu系统中安装wireshark 本篇介绍在Ubuntu系统中配置和启动wireshark: 安装好后,直接在终端运行$ wireshark.出于安全方面的考虑,普通用户不能够打 ...

  7. 【小坑】java下载excel文件

    excel文件的导入导出是很常见的功能,这次做了个下载的功能,踩了一些坑,记下来避免以后重复踩…… 1.inputstream序列化问题 Could not write JSON document: ...

  8. 20145322 何志威《网络对抗》shellcode注入&Return-to-libc攻击深入

    基础知识 Shellcode实际是一段代码,但却作为数据发送给受攻击服务器,将代码存储到对方的堆栈中,并将堆栈的返回地址利用缓冲区溢出,覆盖成为指向 shellcode的地址. execstack - ...

  9. 20145315 《Java程序设计》第十周学习总结

    20145315 <Java程序设计>第十周学习总结 教材学习内容总结 网络概述 为了能够方便的识别网络上的每个设备,网络中的每个设备都会有一个唯一的数字标识,这个就是IP地址.IP地址实 ...

  10. python 查找

    class py_solution: def twoSum(self, nums, target): lookup = {} for i, num in enumerate(nums): if tar ...