CSS3学习总结3-3D与动画

前言：这是篇CSS3中关于3D效果与动画相关的内容。

（1）在CSS3的3D效果中，需要结合透视perspective的属性才能看到3d的效果，这个属性在屏幕上实现了元素近大远小的效果，所以要使用CSS3的3d相关属性，需要记得写perspective。

（2）在CSS3的3d坐标系与数学中的坐标系有所区别，主要是在y轴正方向的规定上。

x轴正方向：从左往右
y轴正方向：从上至下
z轴正方向：从里至外

旋转

在C3的2D变换中，rotate代表了元素围绕Z轴旋转一个角度，3d中还有围绕X和Y轴旋转。

1.rotateX：值单位：deg

让元素围绕着X轴进行旋转

人眼正视X轴正方向，正值是顺时针方向，负值时逆时针方向。
没有透视的3D是看不出来方向
加perspective后看到的效果就是正值元素向屏幕里倒，负值向屏幕外倒。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            perspective: 600px;

        }

        .box{

            width: 200px;

            height: 200px;

            background-color: red;

            margin: 100px auto;

            transform: rotateX(45deg);

            transition: all ease .5s;

        }

        .box:hover{

            transform: rotateX(-45deg);

        }

    </style>

</head>

<body>

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

</body>

</html>

2.rotateY:值

围绕着Y轴进行旋转

正数是逆时针（站在右边推门），负数是顺时针（站在左边推门）
人眼正视y轴正方向，正值是顺时针方向，负值时逆时针方向。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            perspective: 600px;

        }

        .box{

            width: 200px;

            height: 200px;

            background-color: red;

            margin: 100px auto;

            transform: rotateY(45deg);

            transition: all ease .5s;

        }

        .box:hover{

            transform: rotateY(-45deg);

        }

    </style>

</head>

<body>

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

</body>

</html>

3.rotate3d(x,y,z,deg);

rotate3d将rotateX，rotateY，rotateZ3个属性结合起来写，它的参数值x、y、z表示了旋转的3个方向，取值是0～1，deg表示了旋转的角度。（这个属性的具体用法目前不太会使用，使用时经常不能出现预期结果，可能使用方式不对，以后研究。）

平移

在2d变换中translateX和translateY，代表沿X轴和Y轴平移，3d中还有translateZ，沿Z轴平移。

translateZ

就是在Z轴上来回移动，但是如果没有透视的情况下，完全看不出效果，所以，一般transform：translateZ（）都是配合透视一起使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            perspective: 900px;

        }

        .box{

            width: 200px;

            height: 200px;

            background-color: red;

            margin: 100px auto;

            transition: all 2s;

        }

        .current{

            /*transform: rotateX(360deg) translateZ(500px);*/

            transform:translateZ(500px) rotateX(360deg);

        }

    </style>

</head>

<body>

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

    <button>点我呀</button>

    <script type="text/javascript">

    var btn = document.querySelector('button');

    var box = document.querySelector('.box');

    btn.onclick = function(){

        box.classList.add('current');

    }

    </script>

</body>

</html>

其它：translateZ和rotate结合会产生不一样的3D效果，不同的顺序的效果截然不同，如果先rotate 在translateZ 元素是在空间里面发生旋转而如果是translateZ在rotate 元素是在直线上发生旋转。

其它3D相关属性

1.透视：perspective:值

距离屏幕的多远看元素，实现近大远小的效果。

说明：透视值越小，透视效果越强，值越大，透视效果越弱，透视添加在父级身上

2.透视点 perspective-origin：值

最后看看到透视消失的地方，值可以是像素，也可以是百分比，还可以是方位名词，默认值是50%，50%（中心点）。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 155px;

            height: 220px;

            border: 1px solid #000;

            margin: 100px auto;

            /* 说明：透视值越小，透视效果越强，值越大，透视效果越弱，透视添加在父级身上 */

            perspective: 1px;

            perspective-origin: 50% 50%;

        }

        img{

            transition: all 1s;

            transform-origin: bottom;

        }

        .box:hover img{

            transform: rotateX(45deg);

        }

    </style>

</head>

<body>

    <div class="box">

        <img src="data:image/shu.jpg" alt="">

    </div>

</body>

</html>

3.transform-style

规定被嵌套元素如何在3D空间中显示:flat是默认值，让子元素不保留其3D位置， preserve-3d 让子元素保留其3D位置，加在父亲身上.

小总结：透视灭点 transform-style都是添加在父级身上，当元素发生3D翻转的时候，整个坐标系也跟着发生了翻转。

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            perspective: 900px;

        }

        .box{

            width: 400px;

            height: 400px;

            border: 1px solid #000;

            margin: 100px auto;

            perspective: 900px;

            transform: rotateY(70deg);

            transform-style: preserve-3d;

        }

        .box1{

            width: 100px;

            height: 100px;

            background-color: pink;

            margin: 50px auto;

            transform: rotateX(45deg);

            transform-origin: top;

        }

    </style>

</head>

<body>

    <div class="box">

        <div class="box1"></div>

    </div>

</body>

</html>

动画 animation：值

animation属性有8个参数值：

animation-name:自定义动画名
animation-duration:动画的持续时间单位是s或者ms
animation-timing-function:动画的曲线
animation-delay:动画从何时开始
animation-iteration-count:控制动画执行的次数没有单位，一直执行：infinite
aniamtion-direction:控制动画是否逆序播放默认值normal 逆序：alternate
animation-play-state:控制动画的播放和暂停默认值是播放：running 暂停：paused
animation-fill-mode:动画最后的停留位置 forwards 让动画停留在最后一帧

动画一定要先写animation 然后搭配@keyframes去写自定义的动画。注意：animation和@keyframes最好都添加私有前缀。示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box{

            width: 200px;

            height: 200px;

            position: absolute;

            left: 100px;

            top: 100px;

            background-color: pink;

            /* -webkit-animation: feifei 2s linear 0s;

            -moz-animation: feifei 2s linear 0s;

            -ms-animation: feifei 2s linear 0s;

            -o-animation: feifei 2s linear 0s; */

            animation: feifei 2s linear 0s;

        }

        /* 单组动画 */

        @keyframes feifei{

            from{

                width: 200px;

                height: 200px;

                transform: rotate(0deg);

            }

            to{

                width: 400px;

                height: 400px;

                transform: rotate(360deg);

            }

        }

    </style>

</head>

<body>

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

</body>

</html>

如果使用@keyframes规定了多组动画规则，animation也可以同时添加这些组动画，之间只需要用‘，’隔开即可。