神奇的css3（2）动画

作者：一心向应丨 | 来源：互联网 | 2023-05-18 06:00

四、Css32D动画1、2D转换方法函数描述matrix(n,n,n,n,n,n)定义2D转换，使用

四、Css3 2D动画

1、2D 转换方法

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

2、转换属性

Property	描述	CSS
transform	适用于2D或3D转换的元素	3
transform-origin	允许您更改转化元素位置	3

3、形状变换transform

可以实现元素的形状、角度、位置等的变化。

1）rotate(); 以x/y/z为轴进行旋转，默认为z

rotatex(), rotatey(), rotatez(), rotate3d(x, y, z, angle) x, y, z --->矢量

实例：

DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .wrapper {

            width: 1000px;

            height: 200px;

            border: 1px solid black;

            margin: 100px auto;

        }

        .item {

            margin-right: 30px;

            display: inline-block;

            width: 200px;

            height: 200px;

            background: red;

        }

        .item1 {

            /* 沿着X轴旋转45度 */

            transform: rotateX(45deg);

        }

        .item2 {

            /* 沿着Y轴旋转45度 */

            transform: rotateY(45deg);

        }

        .item3 {

            /* 沿着Z轴旋转45度。默认z轴 */

            transform: rotate(45deg);

        }

 

    style>

head>

<body>

    <div class="wrapper">

        <div class="item">未旋转div>

        <div class="item item1">沿着X轴旋转45度div>

        <div class="item item2">沿着Y轴旋转45度div>

        <div class="item item3">沿着Z轴旋转45度div>

    div>

body>

html>

> <div class="item item2">dog2div> <img src="./dog2.jpg"> <div class="item item3">dog3div> <img src="./dog3.jpg"> div> body> html>

>播放/停止button> <div class="wrapper"> <div class="table">div> <div class="pian">div> div> <script> var oTable = document.getElementsByClassName('table')[0]; var oPian = document.getElementsByClassName('pian')[0]; var flag = true; btn.onclick = function(){ if(flag){ flag = false; oTable.style.animationPlayState = "running"; oPian.className = "pian active" }else{ oTable.style.animationPlayState = "paused"; oPian.className = "pian" flag = true; } } script> body> html>

五、Css3 3D动画

1、3D转换方法

函数	描述
matrix3d(n,n, n,n,n,n , n,n,n ,n,n,n, n,n,n,n )	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

2、转换属性

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

3、transform-style

transform-style: flat|preserve-3d;

flat: 默认，子元素将不保留其 3D 位置

preserve-3d : 子元素将保留其 3D 位置。

注意：transform-style 属性需要设置在父元素中, 高于任何嵌套的变形元素。设置了transform-style:preserve-3d的元素，就不能防止子元素溢出设置overflow：hidden；否则会导致preserve-3d失效。

4、perspective——景深

以简单的把perspective理解成人距离显示器的距离，此值越大的效果越差，越小效果越好。假设你距离100米和1米的距离去看一个边长一米的正方体。

重点记住perspective的值要大于3d物体的值。

①perspective: 600px ;默认值none：物体距离人眼的距离是600px;

实例：

DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        .wrapper{

            width: 200px;

            height: 200px;

            margin: 100px auto;

            border: 1px solid #333;

            transform-style: preserve-3d;

            /* perspective: 600px; */

        }

        .item{

            width: 200px;

            height: 200px;

            background: red;

            transform: rotateX(45deg);

           

       

        }

    style>

head>

 

<body>

    <div class="wrapper">

        <div class="item">div>

    div>

body>

 

html>

没有景深：

有景深：

perspective: 600px;

②perspective-origin:默认值是50% 50%

实例：

DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        .wrapper{

            width: 200px;

            height: 200px;

            margin: 100px auto;

            border: 1px solid #333;

            transform-style: preserve-3d;

            perspective: 600px;

            /* 改变视角 */

            perspective-origin: top;

           

        }

        .item{

            width: 200px;

            height: 200px;

            background: red;

            transform: rotateX(90deg);

        }

    style>

head>

 

<body>

    <div class="wrapper">

        <div class="item">div>

    div>

body>

 

html>

当有多个变形元素时，把景深设置到父元素上时，只有一个透视点；把景深设置到子元素上时，每一个变形元素都有一个透视点。

实例：父元素设置景深

DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        .wrapper{

            width: 200px;

            height: 200px;

            margin: 100px auto;

            border: 1px solid #333;

            transform-style: preserve-3d;

            perspective: 600px;

            /* 改变视角 */

            perspective-origin: top;

           

        }

        .item{

            width: 200px;

            height: 200px;

            background: red;

            transform: rotateX(75deg);

        }

    style>

head>

 

<body>

    <div class="wrapper">

        <div class="item">div>

        <div class="item">div>

        <div class="item">div>

        <div class="item">div>

       

    div>

body>

 

html>

实例：子元素设置景深

DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        .wrapper{

            width: 200px;

            height: 200px;

            margin: 100px auto;

            border: 1px solid #333;

            transform-style: preserve-3d;

            /* 改变视角 */

            perspective-origin: top;

           

        }

        .item{

            width: 200px;

            height: 200px;

            background: red;

            transform: perspective(600px) rotateX(75deg);

           

        }

    style>

head>

 

<body>

    <div class="wrapper">

        <div class="item">div>

        <div class="item">div>

        <div class="item">div>

        <div class="item">div>

       

    div>

body>

 

html>

5、backface-visibility: visible | hidden

在元素运动过程中，能否展示元素的背面

实例：可见

DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        .wrapper{

            width: 200px;

            height: 200px;

            margin: 100px auto;

            border: 1px solid #333;

            transform-style: preserve-3d;

            /* 改变视角 */

            perspective-origin: top;

           

        }

        .item{

            width: 200px;

            height: 200px;

            background: red;

            transform: perspective(600px) rotateX(100deg);

            backface-visibility: visible;

           

        }

    style>

head>

 

<body>

    <div class="wrapper">

        <div class="item">div>       

    div>

body>

 

html>

实例：不可见

DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        .wrapper{

            width: 200px;

            height: 200px;

            margin: 100px auto;

            border: 1px solid #333;

            transform-style: preserve-3d;

            /* 改变视角 */

            perspective-origin: top;

           

        }

        .item{

            width: 200px;

            height: 200px;

            background: red;

            transform: perspective(600px) rotateX(100deg);

            backface-visibility: hidden;

           

        }

    style>

head>

 

<body>

    <div class="wrapper">

        <div class="item">div>       

    div>

body>

 

html>

6、3d变化是二人转：元素在转，坐标轴其实也在转

两个相同的元素, 其中一个设置了rotateX(90deg), 另一个设置rotateX(-90deg)，然后同时设置translateZ(100px)；这时, 他们在空间的距离是200px, 而不是0;

实例：

DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        .wrapper {

            position: relative;

            width: 200px;

            height: 200px;

            margin: 100px auto;

            border: 1px solid #333;

            transform-style: preserve-3d;

            perspective-origin: center;

            perspective: 600px;

 

        }

        .item1 {

            position: absolute;

            top: 0;

            width: 200px;

            height: 200px;

            background: red;

            transform: rotateX(90deg) translateZ(100px);

 

        }

        .item2 {

            position: absolute;

            top: 0;

            width: 200px;

            height: 200px; 

            background: green;

            transform: rotateX(-90deg) translateZ(100px);

        }

    style>

head>

 

<body>

    <div class="wrapper">

        <div class="item1">div>

        <div class="item2">div>

    div>

body>

 

html>

实例：旋转照片墙

DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        .wrapper{

            position: relative;

            transform-style: preserve-3d;

            width: 200px;

            height: 200px;

            margin: 200px auto;

            animation: turn 4s linear reverse infinite;

        }

        .wrapper div{

            position: absolute;

            top: 0;

            left: 0;

            width: 200px;

            height: 180px;

            line-height: 200px;

            opacity: 0.5;

            text-align: center;

            color: #fff;

            font-size: 30px;

            background: red;

        }

        .wrapper .item1{

            background: red;

            transform: rotateY(0deg) translate3d(0,0,200px);

        }

        .wrapper .item2{

            background: green;

            transform: rotateY(60deg) translate3d(0,0,200px);

        }

        .wrapper .item3{

            background: orange;

            transform: rotateY(120deg) translate3d(0,0,200px);

        }

        .wrapper .item4{

            background: deepskyblue;

            transform: rotateY(180deg) translate3d(0,0,200px);

        }

        .wrapper .item5{

            background: deeppink;

            transform: rotateY(240deg) translate3d(0,0,200px);

        }

        .wrapper .item6{

            background: purple;

            transform: rotateY(300deg) translate3d(0,0,200px);

        }

        @keyframes turn{

            0%{

                transform: rotateX(-20deg) rotateY(0deg);

            }

            100%{

                transform: rotateX(-20deg) rotateY(360deg);

            }

        }

    style>

head>

 

<body>

    <div class="wrapper">

        <div class="item1">1div>

        <div class="item2">2div>

        <div class="item3">3div>

        <div class="item4">4div>

        <div class="item5">5div>

        <div class="item6">6div>

    div>

body>

 

html>

六、Css 3 动画性能优化

1. 尽可能多的利用硬件能力，如使用3D变形来开启GPU加速

注意：如动画过程有闪烁（通常发生在动画开始的时候），可以尝试下面的Hack：

如下面一个元素通过translate3d右移500px的动画流畅度会明显优于使用left属性:

注：3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡

2. 尽可能少的使用box-shadows与gradients, 这两个都是页面性能杀手，能避免尽量避免。

3. 尽可能的让动画元素不在文档流中，以减少重排。

4. 优化 DOM reflow

实例：立方体旋转

DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content=">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Documenttitle>

    <style>

        .wrapper{

            position: relative;

            transform-style: preserve-3d;

            width: 200px;

            height: 200px;

            margin: 200px auto;

            animation: turn 5s linear infinite;

        }

        .wrapper div{

            position: absolute;

            top: 0;

            left: 0;

            width: 200px;

            height: 200px;

            line-height: 200px;

            opacity: 0.5;

            text-align: center;

            color: #fff;

            font-size: 30px;

            background: red;

        }

        .wrapper .item1{

            background: red;

            transform: rotateX(0deg) translate3d(0,0,100px);

        }

        .wrapper .item2{

            background: deepskyblue;

            transform: rotateX(180deg) translate3d(0,0,100px);

        }

        .wrapper .item3{

            background: green;

            transform: rotateY(90deg) translate3d(0,0,100px);

        }

        .wrapper .item4{

            background: orange;

            transform: rotateY(-90deg) translate3d(0,0,100px);

        }

      

        .wrapper .item5{

            background: deeppink;

            transform: rotateX(90deg) rotateZ(90deg) translate3d(0,0,100px);

        }

        .wrapper .item6{

            background: purple;

            transform: rotateX(-90deg) rotateZ(90deg) translate3d(0,0,100px);

        }

        @keyframes turn{

            0%{

                transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);

            }

            25%{

                transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);

            }

            50%{

                transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);

            }

            75%{

                transform: rotateX(270deg) rotateY(270deg) rotateZ(270deg);

            }

            100%{

                transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);

            }

        }

    style>

head>

 

<body>

    <div class="wrapper">

        <div class="item1">1div>

        <div class="item2">2div>

        <div class="item3">3div>

        <div class="item4">4div>

        <div class="item5">5div>

        <div class="item6">6div>

    div>

body>

 

html>