css基础内容（二）

1.过渡

属性介绍：

    //过渡属性
1. transition-property:width，height,(all)
2. transition-duration:2s //过渡时间
3. transition-delay :1s,2s;//延时时间

---------------------------------------------------
4. 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 之间的数值。 

联写方式：

transition: property duration timing-function delay;

或者:transition: property duration delay timing-function ;

2.圆角属性（border-radius）：

演示代码：

    li{
        width: 200px;
        height: 40px;
        border: 1px solid gray;
        background-color: skyblue;
        margin: 10px 0;
    }
    li:nth-child(1){
        /* 一次设置 全部生效 */
        border-radius: 10px;
    }
    li:nth-child(2){
        border-top-left-radius: 10px;
        border-top-right-radius: 20px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 40px;
    }
    li:nth-child(3){
        /*  如果设置了两个 第一个对应到 左上 右下  第二个对应 右上 左下  */
        border-radius: 10px 50px;
    }
    li:nth-child(4){
        /*  如果设置了三个 第一个对应到 左上   第二个对应 右上 左下  第三个对应到 右下 */
        border-radius: 10px 50px 90px;
    }
    li:nth-child(5){
        /*  如果设置了是个 从 左上 右上 右下 左下  */
        border-radius: 10px 20px 30px 40px;
    }
    li:nth-child(6):hover{
        border-radius: 10px 50px;
        transition: all 1s;
    }

设置值得单位：可是使用em,%进行设置，如果设置成为50%就是圆角

3. 2D，或3D 变换(transform)

相关属性：

---

//移动
translate(x,y)         |定义 2D 转换。  
translate3d(x,y,z)     |定义 3D 。  
translateX(x)          |定义转换，只是用 X 轴的值。  
translateY(y)          |定义转换，只是用 Y 轴的值。  
translateZ(z)          |定义 3D 转换，只是用 Z 轴的值。

---

//缩放    
scale(x,y)            | 定义 2D 缩放转换。  
scale3d(x,y,z)        |定义 3D 缩放转换。  
scaleX(x)             |通过设置 X 轴的值来定义缩放转换。  
scaleY(y)             |通过设置 Y 轴的值来定义缩放转换。  
scaleZ(z)             |通过设置 Z 轴的值来定义 3D 缩放转换。  

---

//旋转
rotate(angle)         |定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) |定义 3D 旋转。  
rotateX(angle)        |定义沿着 X 轴的 3D 旋转。  
rotateY(angle)        |定义沿着 Y 轴的 3D 旋转。  
rotateZ(angle)        |定义沿着 Z 轴的 3D 旋转。

---

//倾斜
skew(x-angle,y-angle)  |定义沿着 X 和 Y 轴的 2D 倾斜转换。  
skewX(angle)           |定义沿着 X 轴的 2D 倾斜转换。  
skewY(angle)           |定义沿着 Y 轴的 2D 倾斜转换。 
perspective(n)         |为 3D 转换元素定义透视视图。  

注意: 使用单位： 角度单位（deg）,距离单位（px）

（1）设置变换参考点（transform-origin）：

transform-origin: x-axis y-axis z-axis;

x-axis 定义视图被置于 X 轴的何处。可能的值：

left 
center 
right 
length 
% 
 
y-axis 定义视图被置于 Y 轴的何处。可能的值：

top 
center 
bottom 
length 
% 
 
z-axis 定义视图被置于 Z 轴的何处。可能的值：

length 

案例：

.pkSingle{
        display: block;
        width: 100px;
        height: 150px;
        margin: 20px auto;
        /* 添加过渡属性 */
        transition: all 1s;

        /* 设置 变换的 参照点 */
        transform-origin: bottom right;

额外内容：

（3）backface-visibility： 定义元素在不面对屏幕时是否可见。

**语法**

backface-visibility: visible|hidden;值 

    visible 背面是可见的。 
    hidden 背面是不可见的。 

注意:过渡无法使用在渐变的颜色上