CSS3动画特效——transform详解

CSS3动画特效——transform详解还可以和过渡属性（Transition）连用 transition&transform,CSS中过度和变形的设置

前置属性：

transform-origin更改一个元素变形的原点
transform-style：
设置元素的子元素是位于 3D 空间中还是平面中

flat：平面，如果选择平面即此值，元素的子元素将不会有 3D 的遮挡关系
preserve-3d：

perspective：指定了观察者与 z=0 平面的距离即开启网页的透视功能
perspective-origin：指定了观察者的位置，用作 perspective 属性的消失点。
backface-visibility：指定当元素背面朝向观察者时是否可见

transform属性：

transform: none|transform-functions;

transform的transform-functions值	描述
none	定义不进行转换。
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
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 转换元素定义透视视图。

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

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

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

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

<style type="text/css">
.container{
    perspective:800px;
}

.common{
    width:100px;
    height:100px;
    margin:0 auto;
    background-color:#75C934;
    text-align:center;
    line-height:100px;
    font-size:12px;word-wrap: normal;

}
/* transform: translate */
.box-translateX,.box-translateY,.box-translateZ,.box-translate{
    -webkit-transition: transform 1s,box-shadow 1s;;
}

.box-translateX:hover{
    transform:translateX(50px);
    background-color: red;
}

.box-translateY:hover{
    transform:translateY(50px);
}
.box-translateZ:hover{
    transform:translateZ(50px);
}
.box-translate:hover{
    transform:translate(-50px,50px);
    box-shadow:3px 3px 5px 0px #000;
}

</style>

</head>
<body>
   
<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-translateX">translateX(50px)</div>
</div>

<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-translateY">translateY(50px)</div>
</div>


<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle;prespective:800px;">
    <div class="common box-translateZ">translateZ(50px)</div>
</div>
<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-translate">translate(-50px,50px)</div>
</div>

translateX(50px)

translateY(50px)

translateZ(50px)

translate(-50px,50px)

translateZ属于立体效果（近大远小），正常情况下是改变元素与人眼之间的距离，距离越大，元素离人越近
默认情况下网页时不支持透视的，如果需要看见效果则必须设置网页的视距
设置网页的视距为800px（人眼距离网页的距离）所以要达到上面的效果还需要添加

perspective:800px;

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

默认顺时针旋转。度数：deg 圈数：turn

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

rotate(deg)

rotateX(deg)

rotateY(deg)

rotateZ(deg)

<style type="text/css">
.common{
    width:100px;
    height:100px;
    margin:0 auto;
    background-color:#75C934;
    text-align:center;
    line-height:100px;
    font-size:16px;
    word-wrap:normal;
}
/* transform: translatxe */
.box-rotateX,.box-rotateY,.box-rotateZ,.box-rotate{
    -webkit-transition: transform 1s,box-shadow 1s;;
}

.box-rotateX:hover{
    transform:rotateX(50deg);
    background-color: red;
}

.box-rotateY:hover{
    transform:rotateY(45deg);
    /* 旋转后隐藏背面 */
    backface-visibility: hidden;
}
.box-rotateZ:hover{
    transform:rotate(45deg);
}
.box-rotate:hover{
    transform:rotate(45deg);
    box-shadow:3px 3px 5px 0px #000;
}
/* transform: rotate */
</style>

   
<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-rotateX">rotateX(45deg)</div>
</div>

<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-rotateY">rotateY(45deg)</div>
</div>


<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-rotateZ">rotateZ(45deg)</div>
</div>
<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-rotate">rotate(45deg)</div>
</div>

rotateX(45deg)

rotateY(45deg)

rotateZ(45deg)

rotate(45deg)

transform-origin更改一个元素变形的原点

<style type="text/css">
.example-container {
    width: 160px;
    height: 160px;
    float: left;
    margin: 0 40px;
    position: relative;

}

.example-element {
    width:160px;
    height:160px;
    background: #e4f0f5;
    font-size: .8rem;
    transition: transform 1s;
}
.transform-origin-box1{
    transform-origin: center center;
}
.transform-origin-box2{
    transform-origin: left top;
    
}
.transform-origin-box3{
    transform-origin: 50px 50px;
}
.transform-origin-box4{
    transform-origin: bottom right 60px;
}

.example-container:hover .example-element{
    transform: rotate(30deg);

}


.static-element{
    width: 160px;
    height: 160px;
    position: absolute;
    top: 0;
    border: dotted 3px #e66465;
}

</style>
<div>

    <div class="example-container">
        <div class="example-element transform-origin-box1">transform-origin: center center;</div>
        
        <div class="static-element">&nbsp;</div>
    </div>
    <div class="example-container">
        <div class="example-element transform-origin-box2">transform-origin: left top;</div>
        
        <div class="static-element">&nbsp;</div>
    </div>
    <div class="example-container">
        <div class="example-element transform-origin-box3">transform-origin: 50px 50px;</div>
        
        <div class="static-element">&nbsp;</div>
    </div>
    <div class="example-container">
        <div class="example-element transform-origin-box4">transform-origin: bottom right 60px;</div>
        
        <div class="static-element">&nbsp;</div>
    </div>
</div>

transform-origin: center center;

transform-origin: left top;

transform-origin: 50px 50px;

transform-origin: bottom right 60px;

综合

<style type="text/css">
.container{
    perspective:800px;

}

.common{
    width:100px;
    height:100px;
    margin:0 auto;
    background-color:#75C934;
    text-align:center;
    line-height:100px;
    font-size:16px;
    word-wrap:normal;
}

.box-rotate-translate,.box-translate-rotate{
    -webkit-transition: transform 1s,box-shadow 1s;;
}



.box-rotate-translate:hover{
    transform:rotate(180deg) translateX(100px);
}
.box-translate-rotate:hover{
    transform:translateX(100px) rotate(180deg);
}
</style>




<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-rotate-translate">rotate-translate</div>
</div>
<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-translate-rotate">translate-rotate</div>
</div>

rotate-translate

translate-rotate

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

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

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

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

<style type="text/css">
.container{
    perspective:800px;

}

.common{
    width:100px;
    height:100px;
    margin:0 auto;
    background-color:#75C934;
    text-align:center;
    line-height:100px;
    font-size:16px;
    word-wrap:normal;
}
/* transform: translate */
/* transform: rotate */
/* transform: scale */
/* transform: skew */
.box-skewX,.box-skewY,.box-skewZ,.box-skew{
    transition: transform 1s,box-shadow 1s;
}

.box-skewX:hover{
    transform:skewX(45deg);
    background-color: red;
}

.box-skewY:hover{
    transform:skewY(45deg);
    /* 旋转后隐藏背面 */
    backface-visibility: hidden;
}
.box-skewZ:hover{
    transform:skewZ(45deg);
}
.box-skew:hover{
    transform:skew(45deg,60deg);
    box-shadow:3px 3px 5px 0px #000;
}

</style>

</head>
<body>
   
<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-skewX">skewX(45deg)</div>
</div>

<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-skewY">skewY(45deg)</div>
</div>


<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-skewZ">skewZ(45deg)</div>
</div>
<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-skew">skew(45deg)</div>
</div>

skewX(45deg)

skewY(45deg)

skewZ(45deg)

skew(45deg,60deg)

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

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

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

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

<style type="text/css">
.container{
    perspective:800px;

}

.common{
    width:100px;
    height:100px;
    margin:0 auto;
    background-color:#75C934;
    text-align:center;
    line-height:100px;
    font-size:16px;
    word-wrap:normal;
}

.box-scaleX,.box-scaleY,.box-scaleZ,.box-scale{
    transition: transform 1s,box-shadow 1s;
}

.box-scaleX:hover{
    transform:scaleX(1.5);
    background-color: red;
}

.box-scaleY:hover{
    transform:scaleY(1.5);
    /* 旋转后隐藏背面 */
    backface-visibility: hidden;
}
.box-scaleZ:hover{
    transform:scaleZ(1.5);
}
.box-scale:hover{
    transform:scale(1.5);
    box-shadow:3px 3px 5px 0px #000;
}

</style>
   
<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-scaleX">scaleX(1.5)</div>
</div>

<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-scaleY">scaleY(1.5)</div>
</div>


<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-scaleZ">scaleZ(1.5)</div>
</div>
<div class="container" style="width: 800px;height:200px;border:1px solid red;display: table-cell;vertical-align:middle">
    <div class="common box-scale">scale(1.5)</div>
</div>

scaleX(1.5)

scaleY(1.5)

scaleZ(1.5)

scale(1.5)

        .box{
            -webkit-transition: transform 0.8s,border-radius 0.8s;  
        }
        .box:hover{
            transform:scale(2,0.8) scale(2,0.5);/*相当于scale(4,0.4)*/
            border-radius:40px;
        }

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

22222

图片缩放效果

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