CSS3动画特效——transform详解

Posted 2021-11-27 lichihua

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3动画特效——transform详解相关的知识，希望对你有一定的参考价值。

公共css

.common{
    width:100px;
    height:100px;
    margin:20px auto;
    background-color:#75C934;
    text-align:center;
    line-height:100px;
    font-size:18px;
}

1）transform:rotate(value); 元素旋转 value为旋转度数

默认顺时针旋转。

value若为负值则逆时针旋转。

        .box{

             /*过渡效果*/
            -webkit-transition: transform 0.8s; 
        }
        .box:hover{
            /*旋转80°*/
            transform:rotate(80deg);
        }

2）transform:skew(value);元素倾斜

value(值)为倾斜度数，例：30deg。

value只有一个值，横向默认向左倾斜；有两个值，第二个值纵向默认向上倾斜。

value若为负值则反方向倾斜。

        .box{
            /*过渡效果*/
            -webkit-transition: transform 0.8s,border-radius 0.8s; 
            border-radius:30px;
        }
        .box:hover{
            transform:skew(20deg,20deg);
            border-radius:0px;
        }

3）transform:scale();元素缩放

value(值)为缩放倍数，例：2。

value只有一个值，默认整体缩放；有两个值，第一个值横向缩放，第二个值纵向缩放。

value值大于1放大，小于1大于0缩小，负值则反向缩放(元素呈镜像)

        .box{
            -webkit-transition: transform 0.8s,border-radius 0.8s;  
        }
        .box:hover{
            transform:scale(2,0.8);
            border-radius:40px;
        }

22222

        .box{
            -webkit-transition: transform 0.8s,border-radius 0.8s;  
        }
        .box:hover{
            transform:scale(2,-0.8);
            border-radius:40px;
        }

图片缩放效果

.scale{
    width:234px;
    height:120px;
    overflow: hidden;
    transform:rotate(0deg);
}
.scale img:hover{
        transform:scale(1.2,1.2);
        transition: 1s
}

4）transform:translate();元素位移

value(值)为位移像素，例：5px。

value只有一个值，横向默认向右移动；有两个值，第二个值纵向默认向下移动。

value若为负值则反方向移动。

        .box{
            -webkit-transition: transform 0.3s,box-shadow 0.3s;
        }
        .box:hover{
            transform:translate(-3px,-3px);
            box-shadow:3px 3px 5px 0px #000;
        }

前置属性：

transform-origin

transform-style

perspective

perspective-origin

backface-visibility

2D变形：

translate

scale

rotate

skew

matrix