CSS3 有3种和动画相关的属性:transform, transition, animation.其中 transform 描述了元素静态样式.而transition 和 animation 却都能实现动画效果.所以transform 常常配合后两者使用 一.transform  描述的是元素静态样式 transform属性应用于元素的2D或3D转换.这个属性允许你将元素旋转,缩放,移动,倾斜等. 必须是鼠标移上或者点击执行属性变化,鼠标离开属性回归.说到底就是属性不会变化.配合-webkit…

transition 和animation两个CSS3属性经常被用到实际项目中,想把它整理出来. 1.先介绍transition >>>>>  a. 在做项目中经常会遇见这样的情景,比如一个按钮,当鼠标移入进去的时候改版按钮背景颜色以及字体颜色.此时外面一般会这样做: .btn{width: 80px;height: 25px;border: 1px solid #333;color:#333;text-align: center;line-height: 25px;} .b…

http://www.w3cplus.com/content/css3-transform/  在CSS3中transform主要包括以下几种:旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix http://www.w3cplus.com/content/css3-transition/  transition主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间…

1.CSS3新增的样式(常用) //颜色透明表示rgba(0,0,0,.5) //圆角(定义角半径)border-radius: 5px 10px 15px 20px; //文字/盒子阴影text-shadow: 2px 3px 3px #000; //x方向,y方向,模糊半径,颜色(可定义多个阴影)box-shadow: (inset) 2px 3px 3px #000; //内阴影,x方向,y方向,模糊半径,颜色(可多个阴影) //线性/径向渐变(没有纳入标准,需加浏览器内核前缀)backg…

css3动画多少都有些了解,但是对于transition.transform.animation这几个属性一直是比较模糊的,所以啊,这里做一个总结,也希望大家都可以对此有一个更好地理解.    其实,最简单的理解,我么可以这么认为:transition.transform.animation分别为过渡.变换.动画. 他们三者的作用实际上是不一样的,比如transition过渡一般都是配合hover使用的,对于transform呢,如果不配合,就是简单的拉伸.缩放.偏移等静态的变换,但是呢,如果配…

小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=5019 一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他…

CSS3 3D Transform 原文:http://www.w3cplus.com/css3/css3-3d-transform.html 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似.CSS3中的3D变换主要包括以下几种功能函数: 3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数: 3D旋转:CSS3中的3D旋转主要包括rotateX().rotateY().rotateZ()和…

1.transform  transform 是通过在浏览器里面让网页元素 移动 旋转 透明 模糊 等方法来实现改变其外观的技术 -webkit-transform : translate(3em,0);想右移动3em,向下移动0em -webkit-transform : rotate(30deg);顺时针旋转30度 -webkit-transform : translate(-3em,1em);向左移动3em,向下移动1em -webkit-transform : scale(2);尺寸放大…

小tips: zoom和transform:scale的区别 转自 张鑫旭 前端大神 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=5019 一.IE和Chrome等浏览器与zoom 还在几年前,zoom还只是IE浏览器自己私有的玩具,但是,现在,除了FireFox浏览器,其他,尤其Chrome和移动端浏览器已经很好支持zoom属性了: zoom的字面意思是“变焦”,…

css中zoom和transform:scale的区别 关于zoom: 以前只是看到别人的代码中用过zoom,自己从未使用过,今天在探究ie7兼容inline-block时,发现里面提到了zoom.下面开始进行对zoom的探究. zoom:normal | <number> | <percentage> 默认值:normal 适用于:所有元素 继承性:有 动画性:是 计算值:绝对长度 取值: normal:    使用对象的实际尺寸.(等同于zoom:1) <number&g…