动画，2D转换，，3D转换怎样运用

Posted 2020-06-11

动画

    @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，
    就能创建由当前样式逐渐改为新样式的动画效果。
          属性｛[email protected]
               2animation ｝
            如：@keyframes myfirst
            {
            from {background: red;}
            to {background: yellow;}
            }

            @-moz-keyframes myfirst /* Firefox */
            {
            from {background: red;}
            to {background: yellow;}
            }

            @-webkit-keyframes myfirst /* Safari 和 Chrome */
            {
            from {background: red;}
            to {background: yellow;}
            }

            @-o-keyframes myfirst /* Opera */
            {
            from {background: red;}
            to {background: yellow;}
            }
   ---------------------------------------------------
    在 @keyframes 中创建动画时，把它捆绑到规定
                1.动画的名称 
                2.规定动画的时长 
    否则不会产生动画效果。
    如：div
            {
            animation: myfirst 5s;
            -moz-animation: myfirst 5s; /* Firefox */
            -webkit-animation: myfirst 5s;  /* Safari 和 Chrome */
            -o-animation: myfirst 5s;   /* Opera */
            }
    用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于
     0% 和 100%。
    ---------
    当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变
    如：@keyframes myfirst
        {
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
        }

        @-moz-keyframes myfirst /* Firefox */
        {
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
        }

        @-webkit-keyframes myfirst /* Safari 和 Chrome */
        {
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
        }

        @-o-keyframes myfirst /* Opera */
        {
        0%   {background: red;}
        25%  {background: yellow;}
        50%  {background: blue;}
        100% {background: green;}
        }
    -------------------------------
    属性                  描述 
    @keyframes          规定动画。 
    animation           所有动画属性的简写属性，除了 
                        animation- play-state     属性                        
    animation-name       规定 @keyframes 动画的名称。 
    animation-duration   规定动画完成一个周期所花费
                         的秒或毫秒。默认是 0。  
    animation-timing-function 规定动画的速度曲线。默认是 "ease"。
    animation-delay       规定动画何时开始。默认是 0。 
    animation-iteration-count 规定动画被播放的次数。默认是 1。 
    animation-direction   规定动画是否在下一周期逆向地
                          播放。默认是 "normal"。  
    animation-play-state  规定动画是否正在运行或暂停。
                          默认是 "running"。 
    animation-fill-mode   规定对象动画时间之外的状态。
    ----------------------------------------------

2D转换

    ：通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸。

    2D2D 转换方法：
    translate() 
    rotate() 
    scale() 
    skew() 
    matrix(）

    如：
    div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg);       /* IE 9 */
-webkit-transform: rotate(30deg);   /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);      /* Firefox */
}

通过 translate() 方法，元素从其当前位置移动，根据给定的
 left（x 坐标） 和 top（y 坐标） 位置参数。
如：
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);       /* IE 9 */
-webkit-transform: translate(50px,100px);   /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);      /* Firefox */
}




通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：
如
div
    {
    transform: scale(2,4);
    -ms-transform: scale(2,4);  /* IE 9 */
    -webkit-transform: scale(2,4);  /* Safari 和 Chrome */
    -o-transform: scale(2,4);   /* Opera */
    -moz-transform: scale(2,4); /* Firefox */
    }

通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：
如：
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);   /* IE 9 */
-webkit-transform: skew(30deg,20deg);   /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);  /* Firefox */
}

matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。


如：使用 matrix 方法将 div 元素旋转 30 度：
div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);     
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      
}

3D转换

3D 转换方法：

rotateX() 
rotateY() 

通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。
如：
div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg);    /* Firefox */
}



通过 rotateY() 方法，元素围绕其 Y 轴以给定的度数进行旋转。
如：
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg);    /* Firefox */
}

属性                描述 
transform        向元素应用 2D 或 3D 转换。 
transform-origin 允许你改变被转换元素的位置。 
transform-style  规定被嵌套元素如何在 3D 空间中显示。 
perspective       规定 3D 元素的透视效果。 
perspective-origin 规定 3D 元素的底部位置。  
backface-visibility 定义元素在不面对屏幕时是否可见。