Css3二维变形

特点：所有的二维变形（转化）都是嗖的一下过去了，没有过渡效果。

2.Transform方法

Transform的所有属性：translate

  2.1.偏移：translate（x,y）

         X表示水平方向上的移动，y代表垂直方向的移动。为负值的时候往相反的方向移动。

transform: translate(500px,200px);

使用该方法可以实现：元素的水平和垂直居中。

width: 200px;
height: 200px;
background-color: #71b9fe;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

   2.2缩放：scale（x，y）

         X表示放大或者缩小元素的宽度，y表示高度。

         ScaleX（）表示只对元素的高进行缩放

         ScaleY（）表示只对元素的宽进行缩放 

注意：当里面的值为负数时，网页会先将其倒过来，再进行缩放

ScaleX（）表示只对元素的高进行缩放

 

2.3旋转：rotate（）      --了解即可       

 deg;单位，度数

       当里面的值为正数时，元素顺时针转，反之，逆时针转

transform:rotate(-120deg);

 

2.4倾斜：skew（）       --了解即可      

        里面的参数指的是绕着那个方向去倾斜

有正负之分

transform:skew(60deg,60deg);

 

2.4使用留个只的矩阵：          

 matrix（a,b,c,d,e,f）

比如transform:matrix(1,0,0,1,50,50);

表示将元素向右移动50px，再向下移动50px

 

 

 

 

 

 

 

 

 

        10 css3过度

特点：1、本质上是一帧动画，一帧结束后，就结束了

     2、过度的效果的实现，必须通过用户的行为，可能触发的行为：hover，focus，click，js代码

10.1transition的属性

     Transition-property：指定元素的过度属性

     Transition-duration：规定了过渡的时间

     Transition-timming-function：规定以任何方式过渡

     Ease：表示快速

     Ease-in：先慢后快

Ease-out：先快后慢

Linear：线性平缓的变换。

Steps（）：规定过度分几步完成。

 

 

10.2缩写：

     Transition：property duration function delay

10.3触发过度

       只有当用户触发事件，过度事件才能进行，比如鼠标移动移出等等，这是它的一个局限性。

 

<style>
    body{
       height: 300px;
    }
    #box{
        height:100px;
        width:100px;
        background-color:#71b9fe;
        position:absolute;
        left:0;
        transition-property:left,width;
        transition-duration:2s;
    }
    body:hover #box{
        left:800px;
        width:300px;
    }
</style>

 

 

 

11 css3动画

1.   animation动画属性

      animation-name：取值为动画名称

      animation-duration：规定动画完成所需要的时间

      animation-timming-function：规定以什么方式完成动画

      animation-delay：规定动画延迟多少时间

      animation-iteration-count：规定动画执行的次数 （infinite无限循环）

      animation-direction：规定动画执行的方向（alternate规定动画来回执行）

      animation-state：规定动画是否执行（paused表示暂停）

      animation-fill-mode：规定动画开始之前和结束之后发生的操作，默认值为none；forwards表示动画结束后元素保留最后帧的状态，backwards则与forwards相反。

 

2.   @keyframes

   规定一个动画，包括动画名称，

from规定初始状态，to规定动画的末状态

0%可以表示出状态，100%也可以表示动画的末状态，即最后帧。

 

  

img {
    width:300px;
    height:300px;
    /*transition-duration:1s;*/
    animation-name:move;
    animation-direction:alternate;
    animation-iteration-count:infinite;/*无限循环*/
    animation-play-state: running;
    animation-duration:2s;    /*持续时间*/
    /*animation-delay: 2s;*//*延迟时间*/
    /*animation:move 1s linearforwards;*/
}

 

@keyframes move {
    /*               from{
                        transform:translate(0,0);
                    }
                    to{
                        transform: translate(800px,500px)scale(5);
                    }*/
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    50% {
        transform: translate(800px, 500px)scale(5);
    }
    60% {
          transform:translate(1300px, 900px)scale(5);
    }
    100%{
        transform: translate(0, 0);
        opacity: 1;
    }
}