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
}
CSS3动画特效——transform详解_css

 

特效2

 

 

 

 

 

 

 

2D变形:

translate

scale

rotate

skew

matrix

 

3D变形:

translate3d

scale3d

rotate3d

matrix3d