2D 动画

Paste_Image.png

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas; color: #f9f9f5}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas; min-height: 20.0px}span.Apple-tab-span {white-space:pre}

.div1{
     position: absolute;
     width: 100px;
     height: 100px;
     left: 10px;
     background-color: red;
     /*过渡*/
     /*-webkit-transition: width 10s  cubic-bezier(0.25,0.1,0.25,1);
     -o-transition: width 10s  cubic-bezier(0.25,0.1,0.25,1);
     transition: width 10s  cubic-bezier(0.25,0.1,0.25,1);*/
     /*-webkit-transition: width 2s ease ,background-color 2s,left 2s;
     -o-transition: width 2s ease ,background-color 2s ,left 2s;
     transition: width 2s ease ,background-color 2s,left 2s;*/

     transition: all 2s;
    }
    .div1:hover{
     width: 1000px;
     background-color: green;
     /*需要制定属性发生变化*/
     left: 500px;
     font-size: 100px;
    }

Paste_Image.png

具体如下图所示

Paste_Image.png

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas; color: #f9f9f5}p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas; min-height: 20.0px}p.p3 {margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Consolas; color: #f9f9f5; min-height: 20.0px}span.Apple-tab-span {white-space:pre}

div{
     width: 100px;
     height: 100px;
     background-color:red;
     /*2d变换 分别代表x y*/
        /* transform:translate(100px,100px);*/
        /* transform:translateX(100px);*/
        /*旋转 deg角度单位*/
         /*transform:rotate(45deg);*/
         /*设定旋转的参照点的圆心*/
         -webkit-transform-origin: 10px 10px;
         -moz-transform-origin: 10px 10px;
         -ms-transform-origin: 10px 10px;
         -o-transform-origin: 10px 10px;
         transform-origin: 10px 10px;
         /*沿z轴转 没意义*/
         /*transform:rotateY(45deg);*/
         /*横向两倍，纵向三倍*/
        /* transform:scale(2,3);*/
         /*倾斜*/
         /*transform:skew(45deg);*/

        /*声明3d*/
         -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
         -ms-transform-style: preserve-3d;
         transform-style: preserve-3d;
          
         transform:translate3D(100px, 100px,1300px);
         transform:rotate(1,0,0,45deg)
     
    }
    div:hover{
        transform:translateY(100px);
    }