CSS3 过渡、2D变形、3D变形 20160527
transition
css3应用最广的属性
通过 CSS3的transition，
我们可以在不使用 Flash 动画或 JavaScript 的情况下，
当元素从一种样式变换为另一种样式时为元素添加效果。
要实现这一点，必须规定两项内容：
指定要添加效果的CSS属性
指定效果的持续时间。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 “ease”。
transition-delay 规定过渡效果何时开始。默认是 0。
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-timing-function
linear 规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in 规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out 规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out 规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
2d变形
通过 CSS3 转换，我们能够对元素进行移动、转动、缩放、拉长或拉伸。
translate() 位移，移动
rotate() 旋转
scale() 缩放
skew() 变形
translate()
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
rotate()
rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。
scale()
scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。
skew()
skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：
transform属性
transform-origin 允许你改变被转换元素的位置。
translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换，改变元素的宽度。
scaleY(n) 定义 2D 缩放转换，改变元素的高度。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换，沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换，沿着 Y 轴。
3d变形
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。
3d变形属性
每个属性多了一个Z，比如：
translateZ
rotateZ
scaleZ
skewZ
perspective:2000px 透视点
perspective-origin: 25% 75%;
transform-style: preserve-3d;该声明应用在3D变换的兄弟元素们的父元素上，
也就是舞台元素
backface-visibility:hidden;设置背景不可见
正方体范例
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.box {
margin: 0 auto;
width: 300px;
height: 300px;
margin-top: 100px;
position: relative;
transform-style:preserve-3d;
}
.box:hover {
-webkit-transform: rotateY(1000deg) rotateZ(1000deg);
/*-webkit-transition-property: tramsform;*/
-webkit-transition-duration: 10s;
}
.box img {
width: 300px;
height: 300px;
position: absolute;
}
.box img:nth-child(1) {
-webkit-transform: rotateX(90deg) translateZ(150px);
}
.box img:nth-child(2){
-webkit-transform: rotateX(180deg) translateZ(150px);
}
.box img:nth-child(3){
-webkit-transform: rotateX(-90deg) translateZ(150px);
}
.box img:nth-child(4){
-webkit-transform: translateZ(150px);
}
.box img:nth-child(5){
-webkit-transform: rotateY(90deg) translateZ(150px);
}
.box img:nth-child(6){
-webkit-transform: rotateY(-90deg) translateZ(150px);
}
style>
head>
<body>
<div class="warp">
<div class="box">
<img src="img/0a6a9c4543a982266570595d8982b9014b90eb42.jpg" />
<img src="img/111922261240.jpg" />
<img src="img/1119224I327.jpg" />
<img src="img/11192350FI.jpg" />
<img src="img/200622767320.jpg" />
<img src="img/u=534790948,3017310551&fm=21&gp=0.jpg" />
div>
div>
body>
html>螺旋体范例
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
.warp {
width: 200px;
margin: 0 auto;
transform-style: preserve-3d;
position: relative;
}
.warp:hover {
transform: rotateY(10000deg);
transition: 100s;
}
.redball {
background-color: red;
height: 50px;
width: 50px;
border-radius: 25px;
position: absolute;
}
.redball:nth-child(1) {
left: 75px;
transform: translateZ(100px);
}
.redball:nth-child(2) {
left: 75px;
top: 16px;
transform: rotateY(36deg) translateZ(100px);
}
.redball:nth-child(3) {
left: 75px;
top: 32px;
transform: rotateY(72deg) translateZ(100px);
}
.redball:nth-child(4) {
left: 75px;
top: 48px;
transform: rotateY(108deg) translateZ(100px);
}
.redball:nth-child(5) {
left: 75px;
top: 64px;
transform: rotateY(144deg) translateZ(100px);
}
.redball:nth-child(6) {
left: 75px;
top: 80px;
transform: rotateY(180deg) translateZ(100px);
}
.redball:nth-child(7) {
left: 75px;
top: 96px;
transform: rotateY(216deg) translateZ(100px);
}
.redball:nth-child(8) {
left: 75px;
top: 112px;
transform: rotateY(258deg) translateZ(100px);
}
.redball:nth-child(9) {
left: 75px;
top: 128px;
transform: rotateY(294deg) translateZ(100px);
}
.redball:nth-child(10) {
left: 75px;
top: 144px;
transform: rotateY(330deg) translateZ(100px);
}
.redball:nth-child(11) {
left: 75px;
top: 160px;
transform:translateZ(100px);
}
.redball:nth-child(12) {
left: 75px;
top: 176px;
transform: rotateY(36deg) translateZ(100px);
}
.redball:nth-child(13) {
left: 75px;
top: 192px;
transform: rotateY(72deg) translateZ(100px);
}
.redball:nth-child(14) {
left: 75px;
top: 208px;
transform: rotateY(108deg) translateZ(100px);
}
.redball:nth-child(15) {
left: 75px;
top: 224px;
transform: rotateY(144deg) translateZ(100px);
}
.redball:nth-child(16) {
left: 75px;
top: 240px;
transform: rotateY(180deg) translateZ(100px);
}
.redball:nth-child(17) {
left: 75px;
top: 256px;
transform: rotateY(216deg) translateZ(100px);
}
style>
head>
<body>
<div class="warp">
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
<div class="redball">div>
div>
body>
html>