CSS3的学习小节

迟来的CSS3学习，在CSS3中，增加了许多的新特性，像过度动画，圆角，媒体查询...等等新的特性，可以给我们开发者日常使用。

过渡

过度动画关键字【transition】 transition : css属性时间方式时间详细写就是:

transition-property 规定需要过渡的css属性名称
transition-duration 规定过渡效果需要花费的时间
transition-timing-function 规定过渡效果的时间曲线
transiity-delay 规定过渡效果开始的时间

DEMO:当鼠标移入，宽度将从 100px => 300px之间的动作

# HTML
<section>my tranition Demo</section>
# CSS
<style>
        section{
            width: 100px;
            height: 100px;
            border-radius : 10px;
            background-color: cadetblue;
            transition : width 2s ease 0.2s;
        }
        section:hover{
            width: 300px;
        }
    </style>

各个transition的属性值

/* transition-property */
transition-property : none|all|属性列表(多个可以用逗号分开)
/* transition-duration */
transition-duration : 时间（秒或者毫秒）
/* transition-timing-function */
transition-timing-function : 
/*
1.linear : 开始到结束都是一个速度(匀速运动)
2.ease : 从慢速开始，逐渐变快，然后慢速结束(抛物线运动)
3.ease-in : 以慢速开始的过渡
4.ease-out : 以慢速结束的过渡
5.ease-in-out : 慢速开始和结束的过渡
6.cubic-bezier : 在函数中自定义自己的值
*/
/* transition-delay */
transition-delay: 时间(执行过渡开始的时间)

动画

要创建CSS动画，你需要了解keyframes规则和animation属性。 @keyframes需要规定变化发生的时间，可以使用百分比如0%,50%,100%等等，也可以用from和to表示0%和100%。0%是动画的开始，100%是动画的结束。 Demo

/* 创建@keyframes规则 from and to*/
 @keyframes anim{
 from {
  width: 150px;
  height: 150px;
  background-color: blue;
  }
  to {
    width: 400px;
    height: 400px;
    background-color: beige;
    } 
}
/* 百分比方式 */
@keyframes anim1{
  0% {
  width: 150px;
  }25% {
  width: 300px;
  }50% {
  width: 150px;
  }100% {
  width: 300px;
  }
}

animation属性

animation的属性列表

animation-name : @keyframes的名称值
animation-duration : 动画指定的完成时间
animation-timing-function : 规定动画的时间曲线
animation-delay ：设置动画开始的时间
animation-iteration-count : 动画播放次数
animation-direction ：是否反复播放动画
animation-fill-mode : 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
animation-play-state : 动画状态，是否在运行

/* animation-name ps:上面已经定义了@keyframes*/
animation-name : anim;
/* animation-duration */
animation-duration : 5s;
/* 
animation-timing-function
具体可以参考transition-timing-function
*/
animation-timing-function :  linear;
animation-timing-function :  ease;
animation-timing-function :  ease-in;
animation-timing-function : ease-out;
animation-timing-function : ease-in-out;
/* animation-delay--给定一个时间 */
animation-delay : 3s; 
/*animation-iteration-count : n(次数)|infinite(一直)*/
animation-iteration-count : 2 | infinite;
/* animation-direction */
animation-direction : normal /* 正常播放 */
animation-direction : reverse /* 反向播放 */
animation-direction : alternate /* 奇数正常播放，偶数反向播放 */
animation-direction : alternate-reverse /* 奇数反向播放，偶数正常播放 */
animation-direction : initial /* 默认值 */
animation-direction : inherit /* 父元素继承 */

图形的转换

在学习transform的时候需要理解2D和3D的区别，2D的话说简单点就是在一个象限之间的操作，或者是通过本身的X,Y轴进行，而3D是一个立体的，会在X,Y,Z轴中进行转换，区别如同一个正方形和正方体一般。

2D转换

通过transform字段和其2D方法进行操作，2D方法如下：

translate()
rotate()
scale()
skew()
matrix()

/* 
tanslate(x,y) 根据设定的XY参数，从当前元素位置移动 
*/
# 向X位置移动100px,Y位置不动，也就像右移动了100px，Y轴同理
transform: translate(100px,0px);
-ms-transform: translate(100px,0px);
-webkit-transform:translate(100px,0px);

/* 
rotate() 给定一个参数，使元素顺时针旋转，如果负值将逆时针旋转
*/
# 顺时针旋转45度
transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);

/* scale() X，Y轴方法缩放多少倍 */
# X,Y轴放大两倍
transform: scale(2,2);
-ms-transform: scale(2,2);
-webkit- transform: scale(2,2);

/* skew() 斜切 */
# skewX X轴倾斜
# skewY Y轴倾斜
transform: skew(30deg,30deg);
-ms-transform: skew(30deg,30deg); 
-webkit-transform: skew(30deg,30deg );

matrix() 矩阵对象

说起来可能会有一点抽象，该方法的初始值为 matrix(1,0,0,1,0,0) 可能不是非常好理解，具体可以去看一下别人总结的数学公式 Demo

# 矩阵
--    --
|1 2 3 |
|4 5 6 |
|7 8 9 |
--    --

transform-origin

tranform-ogigin允许你修改元素的X,Y,Z轴。相对于2D和3D来讲。

/* transform-origin:X Y Z */
transform-origin: 300px 300px;/* 可以是百分比，也可以是位置单位 */

3D转换

transform的3D转换的一些常用方法和属性如下

rotateX()
rotateY()
transform-style
perspective
perspective-origin
backface-visibility

/* rotateX() 围绕X轴顺时针转动 */
# X轴顺时针转动100度
transform: rotateX(100deg);
-webkit-transform: rotateX(100deg); 
/* rotateY() 围绕Y轴顺时针转动 */
# Y轴顺时针转动100度
transform: rotateY(100deg);
-webkit-transform: rotateY(100deg);

transform-style

transform-style属性指定嵌套元素是怎样在三维空间中呈现。

/* transform-style */
# flat ： 所有子元素都在2D平面呈现
# preserve-3d ： 表示所有子元素都在3D平面呈现
transform-style: flat;
transform-style: preserve-3d;

perspective

perspective表示3D元素的透视，定义的perspective属性，它是一个元素的子元素，透视图，而不是元素本身。

perspective: none;/* 不透视 */
perspective: 200px;/* 透视的区域 */

perspective-origin

perspective-origin属性定义3d元素所基于的X,Y轴，该属性允许你修改元素的底部位置，具有x-axis和y-axis参数

/* x-axis参数具有几种可能 */
# left
# center
# right
# length
# %百分比
/* y-axis参数具有几种可能 */
# left
# center
# right
# length
# %百分比

backface-visibility

backface-visibility属性定义当元素不面向屏幕时是否可见，在旋转元素不希望看到背面的时候使用效果很好。

/* backface-visibility */
backface-visibility: visible; /* 背面是可见的 */
backface-visibility: hidden; /* 背面是不可见的 */

总结

迟来的css3trans**系列学习，都是一些常识性的学习，主要是一些情况下使用不至于特别懵逼。matrix() 矩阵对象确实是无从下笔，因为内容有点杂，涉及离散数学。想深入学习可以去看一些比较深入的文章

CSS3的过渡，动画，图形转换