‍‍今天完成的事情：‍‍‍‍了解css3的变换属性。修改昨天完成的task8，将遗漏的翻转卡片效果做好，添加返回顶部按钮。‍‍

‍‍明天计划的事情：‍‍‍‍开始看task9，切图，正式接触js。‍‍

‍‍遇到的问题：‍‍‍‍在做翻转卡片时，按照w3c教程和参考师兄代码后做出来并没有翻转效果。‍‍

                     ‍‍解决：先是重新检查了css代码，但是跟教程和师兄的基本一样，无法解决感觉自己掉坑里了。后来想是不是table标签无法用transition属性，就又开始改html代码，改了后还是老样子。最后无解，只有把html和css对照着一起来看哪里出问题了，果不其然css选择器中本该用id选择器的确用成类选择器去了，改过来后问题就顺畅的解决了。（前面几个task基本用的class所以后来在写css的时候很顺畅的就写的类选择器，哎以后要细心细心再细心，这种低级错误最好不要再犯了！）‍‍

      demo：http://119.10.57.66:880/ptt009/ptt/task8/task8.html

‍‍收获：css动画方案transition和@keyframes

      transition方案

‍‍      之前一直对transition、transform这两个属性搞不清楚，今天特意查了w3c和其他一些教程彻底是弄明白了。‍

     ‍‍ 1、transform属性是对元素的状态进行变换，比如拉伸、放大、翻转、旋转等，是一种静态的改变。‍‍

        ‍‍ transition属性是对元素的变化过程进行设置，如设置一个元素的宽度在两秒内从100px变为200px。‍‍

     ‍‍ 2、transition属性有四个值：要变换的属性、变换时间即速度、贝塞尔曲线的方式渐变即速度曲线、变换延迟时间。如transition：width 2s ease 0；或transition：transform 2s ease 0；。‍‍

     ‍‍ 3、常用的transform属性的值有以下几种（更多值详见w3chttp://www.w3school.com.cn/cssref/pr_transform.asp）

‍

         ‍‍（1）rotate：‍‍‍‍将‍‍元素进行旋转，单位为deg。如rotate(45deg)；‍‍

                      （2）t‍‍ranslate：将元素进行平移。这个属性是可以有两个参数的，分别表示向X轴和向Y轴进行平移的量，单位为px，第二个参数可以默认不填写，比如translate(20px,30px)；

‍

         ‍‍（3）scale‍‍：将元素‍‍进行放大或缩小，scale的参数有两个，分别表示向X轴和Y轴进行放大的倍数，大小在0~正无穷，第二个参数可以默认不填写，如果不填写则是默认等比放大缩小。比如scale(2)；‍‍

         ‍‍（4）skew：‍‍斜切变化。参数为角度degskew的参数有两个，分别表示X轴Y轴的斜切变化，第二个参数可以不填写，如果不填写，Y轴斜切无变化。‍‍

参考：http://www.cnblogs.com/yjf512/archive/2012/07/14/2591817.html

    @keyframes方案

   transition和transform结合使用是css动画中基础的方式，但实现css动画还有@keyframe方式即关键帧方式，下面简单介绍@keyframe实现动画的方式。

  需要用到的属性：animation、@keyframe。

   animation属性将动画与div元素绑定（即指定动画对象），是一个简写属性，其一共有六个属性：自定义动画名称、动画时间、速度曲线、延迟、播放次数、是否轮流反向播放。详见http://www.w3school.com.cn/cssref/pr_animation.asp

   @keyframe用来创建动画‍‍，将一套 CSS 样式逐渐变化为另一套样式。语法为：

             @keyframe 动画名{ 动画时长百分比{css属性} }如：‍‍

@keyframes mymove/***动画名要与animation定义的动画名一样****/{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}

或：

        @keyframes mymove

        {

        from {top:0px;}

        to {top:200px;}

        }

详见http://www.w3school.com.cn/cssref/pr_keyframes.asp

‍‍