zoukankan      html  css  js  c++  java

  • 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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=" 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
}

    特效2：

    2D变形：

    translate

    scale

    rotate

    skew

    matrix

    3D变形：

    translate3d

    scale3d

    rotate3d

    matrix3d
  • 相关阅读:
    python详解json模块
    postman---post请求数据类型
    postman---postman发送请求
    SpringBoot之集成通用Mapper
    Mybatis-generator/通用Mapper/Mybatis-Plus对比
    spring-data-JPA repository自定义方法规则
    JPA之@GeneratedValue注解
    Java工具类NumberUtils使用
    shell函数
    Maven的生命周期
  • 原文地址：https://www.cnblogs.com/lichihua/p/10807088.html
Copyright © 2011-2022 走看看