Bootstrap

神奇的css3(2)动画

四、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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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>

实例:钟表摆盘

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

            list-style: none;

        }

        .wrapper {

            position: relative;

            width: 200px;

            height: 200px;

            border: 1px solid black;

            margin: 100px auto;

            border-radius: 50%;

        }

        li{

            position: absolute;

            top: 0;

            left: 50%;

            transform: translateX(-50%);

            display: inline-block;

            transform-origin: 0 100px;

        }

        span{

            /* 必须先改成行级块元素 */

            display: inline-block;

        }

        li:nth-of-type(2){

            transform: rotate(30deg);

        }

        li:nth-of-type(2) span{

            transform: rotate(-30deg);

        }

        li:nth-of-type(3){

            transform: rotate(60deg);

        }

        li:nth-of-type(3) span{

            transform: rotate(-60deg);

        }

        li:nth-of-type(4){

            transform: rotate(90deg);

        }

        li:nth-of-type(4) span{

            transform: rotate(-90deg);

        }

        li:nth-of-type(5){

            transform: rotate(120deg);

        }

        li:nth-of-type(5) span{

            transform: rotate(-120deg);

        }

        li:nth-of-type(6){

            transform: rotate(150deg);

        }

        li:nth-of-type(6) span{

            transform: rotate(-150deg);

        }

        li:nth-of-type(7){

            transform: rotate(180deg);

        }

        li:nth-of-type(7) span{

            transform: rotate(-180deg);

        }

        li:nth-of-type(8){

            transform: rotate(210deg);

        }

        li:nth-of-type(8) span{

            transform: rotate(-210deg);

        }

        li:nth-of-type(9){

            transform: rotate(240deg);

        }

        li:nth-of-type(9) span{

            transform: rotate(-240deg);

        }

        li:nth-of-type(10){

            transform: rotate(270deg);

        }

        li:nth-of-type(10) span{

            transform: rotate(-270deg);

        }

        li:nth-of-type(11){

            transform: rotate(300deg);

        }

        li:nth-of-type(11) span{

            transform: rotate(-300deg);

        }

        li:nth-of-type(12){

            transform: rotate(330deg);

        }

        li:nth-of-type(12) span{

            transform: rotate(-330deg);

        }

    </style>

</head>

 

<body>

    <div class="wrapper">

        <ul>

            <li><span>12</span></li>

            <li><span>1</span></li>

            <li><span>2</span></li>

            <li><span>3</span></li>

            <li><span>4</span></li>

            <li><span>5</span></li>

            <li><span>6</span></li>

            <li><span>7</span></li>

            <li><span>8</span></li>

            <li><span>9</span></li>

            <li><span>10</span></li>

            <li><span>11</span></li>

        </ul>

    </div>

</body>

 

</html>

 

 

2)scale(); 以x/y为轴进行缩放

scale(x, y) 接受两个值,如果第二参数未提供,则第二个参数使用第一个参数的值

scalex(),scaley()值是数字表示倍数,不加任何单位,scale3d(),scale3d(sx,sy,sz)

实例:

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .wrapper {

            width: 800px;

            height: 100px;

            border: 1px solid black;

            margin: 100px auto;

        }

        .item {

            display: inline-block;

            width: 100px;

            height: 100px;

            background: red;

            border: 1px solid black;

            margin-right:50px;

        }

        .item1 {

            /* 沿着X轴缩放1倍 */

            transform: scaleX(2);

        }

        .item2 {

            /* 沿着Y轴缩放1倍 */

            transform: scaleY(2);

        }

        .item3 {

            /* x、y轴都缩放1倍 */

            transform: scale(2);

        }

 

    </style>

</head>

 

<body>

    <div class="wrapper">

        <div class="item">未缩放</div>

        <div class="item item1">沿着X轴缩放1倍</div>

        <div class="item item2">沿着Y轴缩放1倍</div>

        <div class="item item3">scale(2),x、y轴都缩放1倍</div>

    </div>

</body>

 

</html>

3)skew(); 对元素进行倾斜扭曲

skew(x, y);接受两个值,第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0

skewx(), skewy()

4)translate(); 可以移动距离,相对于自身位置。

translate(x, [y])

translatex(),translatey(),translatez(),translate3d(x, y, z)

实例:

.item1{

            transform: translateX(100px);

        }

        .item2{

            transform: translateY(100px);

        }

实例:块元素水平垂直居中显示,元素宽高未知

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <style>

        .wrapper{

            position: relative;

            width: 1000px;

            height: 600px;

            margin: 0 auto;

            border: 1px solid black;

        }

        .box{

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%,-50%);

            border: 1px solid red;

        }

    </style>

</head>

<body>

    <div class="wrapper">

        <div class="box">你好</div>

    </div>

</body>

</html>

4、transform-origin 变换原点

任何一个元素都有一个中心点,默认情况下,其中心点是居于元素x轴和y轴的50%处,如图:

 

也可以取下述值:

5、transition:过渡动画

语法:transition:ele time function delay;

 transition  属性是css3的一个复合属性,主要包括一下几个子属性

transition-property:指定过渡或动态模拟的css属性

transition-duration:指定过渡所需要的时间

transition-timing-function:指定过渡函数

transition-delay:指定开始出现的延迟时间

下列为过渡动画可以参与过渡的属性:

transition  速录函数可以选择的值:

 

实例:

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .wrapper {

            width: 800px;

            height: 100px;

            border: 1px solid black;

            margin: 100px auto;

        }

        .item {

            display: inline-block;

            width: 100px;

            height: 100px;

            background: red;

            border: 1px solid black;

            margin-right: 50px;

            transition: 3s linear;

        }

        span:hover + div{

            transform: rotate(45deg)

        }

    </style>

</head>

 

<body>

    <div class="wrapper">

        <span>hover此处 ,动画开始:</span>

        <div class="item">带有过渡的动画</div>

    </div>

</body>

 

</html>

 

实例:点击具体item切换显示图片

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

 

        .wrapper {

            position: relative;

            width: 600px;

            height: 300px;

            border: 1px solid black;

            margin: 0 auto;

 

        }

        .wrapper .item {

            width: 50px;

            background: deeppink;

            padding: 3px;

            text-align: center;

            margin-top: 50px;

            margin-left: 10px;

            border-radius: 10px;

            box-shadow: 2px 3px 8px 3px #666;

        }

 

        .wrapper img {

            position: absolute;

            top: 0;

            left: 50px;

            width: 400px;

            height: 300px;

            opacity: 0;

            transition: all 1s linear; 

            border-radius: 20px;

        }

 

        .item1:hover + img {

            left: 100px;

            opacity: 1;

        }

        .item2:hover + img {

            left: 130px;

            opacity: 1;

        }

        .item3:hover+img {

            left: 130px;

            opacity: 1;

        }

    </style>

</head>

 

<body>

    <div class="wrapper">

        <div class="item item1">dog1</div>

        <img src="./dog1.jpg">

        <div class="item item2">dog2</div>

        <img src="./dog2.jpg">

        <div class="item item3">dog3</div>

        <img src="./dog3.jpg">

 

    </div>

</body>

 

</html>

6、动画animation   

 animation 属性为css3的复合属性,主要包括以下子属性

1)animation-name:  此属性为执行动画的 keyframe

2)animation-duration: 此属性为动画执行的时间

3)animation-timing-function: 指定过渡函数速率

4)animation-delay: 执行延迟时间

5)animation-direction: normal/reverse/alternate/alternate-reverse;

要用来设置动画播放方向:normal:默认值。动画按正常播放。reverse:动画反向播放。alternate:动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。alternate-reverse:动画在奇数次(1、3、5...)反向播放,在偶数次(2、4、6...)正向播放。)

6)animation-iteration-count:infinite/number;

主要用来定义动画的播放次数。n 播放次数,infinite 无限次)

7)animation-fill-mode: none/forwards/backwards;

定义在动画开始之前和结束之后发生的操作。主要具有四个属性值:none:默认值,表示动画将按预期进行和结束,在动画完成其最后一帧时,动画会反转到初始帧处。forwards: 表示动画在结束后继续应用最后的关键帧的位置。backwards:会在向元素应用动画样式时迅速应用动画的初始帧。both:元素动画同时具有forwards和backwards效果)

8)animation-play-state:runing/pasued;

主要用来控制元素动画的播放状态。running 播放,paused  暂停)

7、关键帧@keyframes

animation 动画会按照keyframes 关键帧里面指定的帧状态而过渡执行。

0% - 100% 代表动画的时间过渡

@keyframes demoMove{

0%{ background-color:red;}

10%{ background-color:green;}

20%{ background-color:white;}

50%{ width:200px;}

100%{ height:200px;}

}

帧频里面如果只有 0% 和 100%两个关键帧,那么可以用 from to 代替

@keyframes demoMove{

from{ background-color:red;}

to{ height:200px;}

}

实例:方块运动

<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <style>

        .wrapper {

            position: relative;

            width: 300px;

            height: 300px;

            margin: 0 auto;

            border: 1px solid black;

        }

        .demo {

            position: absolute;

            left: 0;

            top: 0;

            width: 100px;

            height: 100px;

            background: red;

            animation: move 4S linear infinite;

        }

        @keyframes move {

            25% {

                left: 200px;

                top: 0;

                background: green;

            }

            50% {

                left: 200px;

                top: 200px;

                background: pink;

            }

            75% {

                left: 0;

                top: 200px;

                background: blue;

            }

            100% {

                left: 0;

                top: 0;

                background: red;

            }

        }

    </style>

</head>

 

<body>

    <div class="wrapper">

        <div class="demo" id="demo"></div>

    </div>

</body>

 

</html>

实例:网页云音乐转盘

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <style>

    *{

        padding: 0;

        margin: 0;

    }

    .wrapper{

        position: absolute;

        top: 50%;

        left: 50%;

        transform:translate(-50%,-50%);

        /* border: 1px solid black; */

    }

    button{

        position: absolute;

        left: 50%;

        transform: translateX(-50%);

        bottom: 150px;

        color: #fff;

        font-size: 20px;

        padding: 15px;

        background: red;

    }

    .table{

        width: 200px;

        height: 200px;

        border: 50px solid black;

        border-radius: 50%;

        animation: turn 5s linear infinite paused;

        background: url('./dog1.jpg');

        background-size: 100% 100%;

    }

    .pian{

        position: absolute;

        left: 50%;

        top: -70px;

        transform: translateX(-50%);

        width: 10px;

        height: 150px;

        background: orchid;

        border-bottom-left-radius: 100%;

        border-bottom-right-radius: 100%;

        transform-origin: top;

        transform: rotate(-60deg);

    }

    .active{

        transform: rotate(-30deg);

    }

    @keyframes turn{

        0%{

            transform: rotate(0deg);

        }

        100%{

            transform: rotate(360deg);

        }

    }

    </style>

</head>

<body>

    <button id = "btn">播放/停止</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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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">1</div>

        <div class="item2">2</div>

        <div class="item3">3</div>

        <div class="item4">4</div>

        <div class="item5">5</div>

        <div class="item6">6</div>

    </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="width=device-width, initial-scale=1.0">

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

    <title>Document</title>

    <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">1</div>

        <div class="item2">2</div>

        <div class="item3">3</div>

        <div class="item4">4</div>

        <div class="item5">5</div>

        <div class="item6">6</div>

    </div>

</body>

 

</html>

 

转载于:https://www.cnblogs.com/wangzhenling/p/8989678.html

;