这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. WebService-WSDL简单介绍

    一.什么是WSDL 网络服务描述语言(Web Services Description Language)简称WSDL.作用是通过接口之间的调用实现数据的传输.由于WSDL是基于XML格式的,所以它可 ...

  2. Python:数字的格式化输出

    >>> 'The value is {:0,.2f}'.format(x) 'The value is 1,234.57' 需要将数字格式化后输出,并控制数字的位数.对齐.千位分隔符 ...

  3. 【运维技术】node项目使用strongloop进行部署相关教程

    node项目使用strongloop进行部署相关教程 安装strongloop 下载安装node 解压到路径完成安装 使用软链方式配置环境变量 添加cnpm的淘宝镜像源 安装node-gyp的模块依赖 ...

  4. 20145311 《Java程序设计》第2周学习总结

    20145311 <Java程序设计>第2周学习总结 教材学习内容总结 3.1Java的类型分为基本类型(Primitive type)和类类型(Class type)基本类型: *整数: ...

  5. 如何运行.ipynb文件

    首先cmd下面输入: pip install jupyter notebook ,安装慢的改下pip的源为国内的源 然后cmd中输入: jupyter notebook就会弹出一个页面 先upload ...

  6. 浅谈HashMap 的底层原理

    本文整理自漫画:什么是HashMap? -小灰的文章 .已获得作者授权. HashMap 是一个用于存储Key-Value 键值对的集合,每一个键值对也叫做Entry.这些个Entry 分散存储在一个 ...

  7. Vue+Webpack配置css-loader时报错：Module build failed: Unknown word

    使用Vue+Webpack搭建工程时,在webpack.config.js中的module的rules里针对各种文件配置加载工具.在针对css文件配置时遇到一个问题:打包构建时报错——Module b ...

  8. linux 查看数据库和表

    mysql -h localhost -u 用戶名 -p密碼                //連接數據庫use desk_show;                                 ...

  9. display:box，按比列划分，水平均分，及垂直等高

    一.按比例划分 <div class="test"> <p id="p1">Hello</p> <p id=" ...

  10. UVA-1604 Cubic Eight-Puzzle （双向BFS+状态压缩+限制搜索层数）

    题目大意:立体的八数码问题,一次操作是滚动一次方块,问从初始状态到目标状态的最少滚动次数. 题目分析:这道题已知初始状态和目标状态,且又状态数目庞大,适宜用双向BFS.每个小方块有6种状态,整个大方格 ...