神奇的CSS3属性—transition、transform和animation
神奇的CSS3属性—transition、transform和animation
transition过渡
可以让动画在CSS层面实现，此时不是利用setInterval()，不是定时器，而是底层C++在渲染，渲染动画的质量、丝滑程度都要远远优于JS、jQuery。
1.1语法
transition: all 1s ease 0s;1.2属性
transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property 规定应用过渡的 CSS 属性的名称。 transition-duration 定义过渡效果花费的时间，默认是 0，单位是秒 transition-timing-function 规定过渡效果的时间曲线，默认是 "ease"。 transition-delay 规定过渡效果何时开始（是否延迟），默认是 0，单位是 秒。
- 关于transition-timing-function属性:
表示过渡缓冲，常见属性值有ease和linear。 ease 表示两头慢，中间快 linear 表示匀速 事实上，不仅仅可以写ease或者linear，可以写任何的贝塞尔曲线的值：
transition-timing-function：cubic-bezier(0, 0.99, 1, 0.26)来个栗子(部分代码)：
<style type="text/css">
div{
width: 200px;
height: 200px;
background-color: orange;
transition:all 1s linear 1s;
}
div:hover{
width: 500px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
</body>1.3过渡被触发的条件
任何改变CSS的情况，都会触发过渡。比如：hover、增加移除类、干脆直接设置CSS。
- 直接设置css会引发过渡动画：
document.getElementById("box").style.width = "300px";- 类名的改变也会引发过渡动画：
document.getElementById("box").className = "long";transform 变形
transform属性可以说是最重量级的CSS属性的改变。它让元素可以进行2D、3D的形状变化。
2.1 2D转换方法
属性值 | 描述 |
|---|---|
translate(left，top) | 移动，根据给定的left和top参数 |
rotate(30deg) | 旋转，正值顺时针，负值逆时针 |
scale(2，4) | 缩放，根据给定的宽度和高度参数 |
skew(30deg,20deg) | 倾斜，根据给定的水平线（X 轴）和垂直线（Y 轴）参数 |
matrix() | 集合，所有 2D 转换方法组合在一起 |
skew 倾斜
scale 缩放
rotate 旋转
上代码：
<style type="text/css">
img:nth-child(1){
transform:rotate(30deg);
}
img:nth-child(2){
transform: skew(10deg,20deg);
transition:all 1s ease 0s;
}
img:nth-child(3){
transform:scale(0.5);
}
img:nth-child(4){
transform:scale(0.5) skew(10deg,20deg) rotate(30deg);
}
</style>补充一点translate()方法，它可以帮助我们实现未知宽高元素的垂直居中效果：父元素相对定位，子元素绝对定位，left和top值分别设置为50%，并且设置transform：translate（-50%，-50%）。这是利用了translate（）位移是根据元素本身的位置来进行移动的。
当然，这些方法也可以合在一起写在transform属性当中，多种方法之间用空格隔开；并且这些变形的属性也是会有过渡效果的。
transform:scale(0.5) skew(10deg,20deg) rotate(30deg); 2.2 3D变换
rotate
属性值 | 描述 |
|---|---|
transform:rotateX(30deg) | 绕X轴旋转 |
transform:rotateY(30deg) | 绕Y轴旋转 |
transform:rotateZ(30deg) | 绕Z轴旋转 |
transform:translate3D(10px,20px,30px); | 空间移动 |
那么问题来了，rotate到是什么鬼？
哈哈哈，看图：
邹凯的体操单杠就是rotateX
蔡依林的钢管舞就是rotateY
旋转飞刀的特技表演是rotateZ
简单粗暴的图片释义，不知道大家有没有理解一点，哈哈。
perspective
除了rotate之外还有一个必不可少的perspective属性。
perspective的中文意思是：透视，视角，或者说是景深。perspective属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D。
CSS3 3D transform的透视点是在浏览器的前方！
translate
如果说rotateX/rotateY/rotateZ可以帮助理解三维坐标，而translateZ则可以帮助理解透视位置。我们都知道近大远小的道理，对于没有rotateX以及rotateY的元素，translateZ的功能就是让元素在自己的眼前或近或远。
- 此外： 往自己此时左手边移动：transform:translateX(100px); 往自己此时的下边移动：transform:translateY(100px); 往自己此时的朝向移动：transform:translateZ(100px);
perspective-origin
变形透视中点，默认的透视是舞台的中点。
transform-style
当一个舞台自己要旋转的时候，一定要加上：
transform-style:preserve-3d;最后来个全家福吧：
属性值 | 描述 |
|---|---|
transform | 向元素应用2D或3D转换 |
transform-origin | 允许你改变被转换元素的位置 |
transform-style | 规定被嵌套元素如何在3D空间中显示 |
perspective | 规定3D元素的透视效果 |
perspective-origin | 规定3D元素的底部位置 |
backface-visibility | 定义元素在不面对屏幕是是否可见 |
animation动画
关于animation动画也有一些很有意思的属性，太懒了就不总结了，哈哈，大家回头自己翻翻资料哈，看好你哦~
参考资料 http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
http://www.w3school.com.cn/cssref/pr_transform.asp
http://www.cnblogs.com/aaronjs/p/4642015.html
腾讯云开发者
