css3变化，动画

css3可以实现一些动画过渡之类的。先来研究下api

2D变化

css3提供可以更改元素的css方法，我们可以移动，比例化，反过来，旋转，和拉伸元素。
属性： transform
transform就和width和height之类的属性是一样的。
属性值可能为：

translate() 移动
根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

rotate() 旋转
给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale() 缩放
该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数
transform: scale(2,3); /* 标准语法 */
skew() 倾斜
包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。
*. skewX(<angle>);表示只在X轴(水平方向)倾斜。
*. skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

属性transform-origin
默认值： 50% 50% 0 表示变化的中心 2d变化前两个参数代表x和y，3d变换第三个参数代表z轴。

但是仅仅在css中加上以上属性，元素是不会动的。是静态的。需要配合过渡属性transition
属性： transition
我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：
*. 指定要添加效果的CSS属性
*. 指定效果的持续时间。

div
{
    transition: width 2s; // div的长度有变化是，过渡效果生效，过渡时间为2秒
    -webkit-transition: width 2s; /* Safari */
}

transition: width 1s linear 2s; 或者transition: transform1s linear 2s;
第三个参数：规定过渡效果的时间曲线。默认是 "ease"。
第四个参数：规定过渡效果何时开始。默认是 0。
这样就可以实现简易的动画了。要是我们想实现的动画不仅仅是伸缩，平移之类的怎么办，或者我们平移完成后还想伸缩呢，transform提供的只能说一种变化，复杂的变化需要提前规定好动画的规则？css3也提供了动画api@keyframes和animation
属性： @keyframes
@keyframes规定动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。 @keyframes内部也可以规定transform为变化内容。

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

当在 @keyframes 创建动画，必须把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
*. 规定动画的名称
*. 规定动画的时长

div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

属性：animation
规定动画的时间，运动曲线，何时开始之类的。和transition相同的效果。

遇到的问题

一个div ，目标实现：先沿着X轴旋转180°再沿着Y轴旋转180°。
效果如下

于是我就这么写

@keyframes demo1run {
    0% {transform: rotateX(0deg) }
    50% {transform: rotateX(180deg) }
    100% {transform: rotateY(180deg) }
  
}

!想着先X轴变化了180°后。再Y轴变化180°。但这么写的结果如下。

奇怪怎么成了先X轴变化了180°后。再Z轴变化180°了呢？？
因为这么写的话。从50%到100%的变化为 rotateX 180- 0deg, rotateY 0deg - 180 .此时表现的动画相当于rotateZ（180deg）。旋转变换所以修改成

@keyframes demo1run {
    0% {transform: rotateX(0deg) }
    50% {transform: rotateX(180deg) }
    100% {transform:  rotateX(180deg) rotateY(180deg) } // 加上X轴的变化。证明这个过程不要变化X轴
  
}

3D动画

想要实现的动画是3D效果的。必不可少perspective属性。

perspective ： none　｜　具有单位的长度值
属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。另一个值<length>接受一个长度单位大于0的值。而且其单位不能为百分比值。<length>值越大，角度出现的越远，从而创建一个相当低的强度和非常小的3D空间变化。反之此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。比如你站在10英尺和1000英尺的地方看一个10英尺的立方体。在10英尺的地方，你距离立方体是一样的尺寸。因此视角转变远远大于站在1000英尺处的，立体尺寸是你距离立方体距离的百分之一。

依据上面的介绍，我们可对perspective
取值做一个简单的结论：
*. perspective取值为none或不设置，就没有真3D空间。
*. perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
*. perspective的值无穷大，或值为0时与取值为none效果一样。
张鑫旭　CSS3 3D transform变换

制作筛子

先实现静态的效果图，目标如下

我怎么实现的结果如下呢？

首先需要给6个面的父元素设置高度和宽度为6个子div的宽和高。其次需要时元素居中。因为视角的问题。

css3变化，动画