CSS（8）空间转换动画

空间转换：

注：z轴与视线方向相同别名：3D转换属性：transform

平移与视距：

因为电脑是二维平面，所以默认下：z轴不可见

因此需要加视距：perspective: ;

视距perspective:

作用：指定了观察者与z=0这一平面的距离，为元素添加透视效果

透视效果：近大远小，近实远虚

属性：（直接添加给父级，取值范围（800~1200））

perspective: 视距；过小变化不明显，过大变化太强烈

平移：

1.transform: translate3d(x,y,z);
2.transform: translateX();
4.transform: translateY();
5.transform: translateZ();
6.取值正负均可：1.像素单位数值 2.百分比：参照盒子自身尺寸

代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            perspective: 1000px;
        }
        .box {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: pink;
            transition: all .5s;
        }
 
        .box:hover {
            /* 因为电脑是二维平面，因此默认状况下，z轴不可见 */
            /* 缺一不生效 */
            transform: translate3d(100px,200px,300px);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
    </div>
</body>
</html>复制

旋转：

transform: rotatez()：以z轴为轴旋转

transform: rotatex()：以x轴为轴旋转

transform: rotatey()：以y轴为轴旋转

左手法则：（根据旋转方向确定取值正负）左手握住旋转轴，大拇指指向正值方向，其余4指弯曲方向为旋转正值方向

代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            margin: 100 auto;
            /* 视距 */
            perspective: 1000px;
        }
 
        img {
            width: 300px;
            transition: all .5s;
        }
 
        .box img:hover {
            transform: rotateX(60deg);
            transform: rotateY(60deg);
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../早柚.gif" alt="">
    </div>
</body>
</html>复制

立体呈现：

transform-style: ;

作用：决定元素的子元素是存在平面中还是立体空间中

属性：flat:子级存在平面中；preserve-3d：子级存于3d空间中

使用方法：

1.直接父级添加transform-style: preserve-3d;

2.子级通过定位到自己应到的位置上

3.调整盒子位置（位移或旋转）

代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cube {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* background-color: pink; */
            transition: all 1s;
 
            transform-style: preserve-3d;
            position: relative;
 
            /* 观察Z轴的移动效果 */
            /* transform: rotateY(88deg); */
            
        }
 
        .cube div {
            position: absolute;
            left: 0;
            top: 0;
            width: 200px;
            height: 200px;
        }
 
        .front {
            background-color: orange;
            transform: translateZ(100px);
        }
 
        .back {
            background-color: green;
            transform: translateZ(-100px);
        }
 
        .cube:hover {
            transform: rotateY(90deg);
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="front">前面</div>
        <div class="back">后面</div>
    </div>
</body>
</html>复制

缩放：

transform: scaleX(); transform: scaleY(); transform: scaleZ();

z轴缩放要悬停下才能观察到

单位:无，等于1不变，大于1放大，小于1缩小

代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }
 
        .nav {
            width: 300px;
            margin: 20px auto;
        }
 
        .nav ul {
            display: flex;
        }
 
        .nav li {
            width: 100px;
            height: 40px;
            line-height: 40px;
            transition: all .5s;
 
            /* 转3D空间存储 */
            transform-style: preserve-3d;
 
             /* 旋转观察 */
             /* transform: rotateY(30deg) rotateX(-20deg); */
             
            /* 定位 */
            position: relative;
        }
 
        .nav li a{
            /* 定位 */
            position: absolute;
            top: 0;
            left: 0;
 
            display: block;
            width: 100%;
            height: 100%;
            /* 文本居中 */
            text-align: center;
            /* 去除下划线 */
            text-decoration: none;
            color: #fff;
        }
 
 
        /* 立方体的每个面都有独立的坐标轴，互不影响 */
        .nav li a:first-child {
            background-color: green;
            transform: translateZ(20px);
        }
        .nav li a:last-child {
            background-color: orange;
            transform: translateY(-20px) rotateX(90deg);
            /* 或 */
            /* 旋转会改变轴向 */
            /* transform: rotateX(90deg) translateZ(20px); */
        }
 
        .nav li:hover {
            /* 旋转 缩放 */
            transform: rotateX(-90deg) scaleX(0.2);
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li>
                <a href="#">登入</a>
                <a href="#">Login</a>
            </li>
            <li>
                <a href="#">注册</a>
                <a href="#">Register</a>
            </li>
        </ul>
    </div>
</body>
</html>复制

动画：

动画属性：animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态；

注：
动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值，第一个表示动画时长，第二个表示延长时间
开始代码和默认样式一样时，开始代码可以省略

实现步骤：1.定义动画 2.使用动画

1.定义动画：(百分比表示动画时长的百分比)
@keyframes 动画名称 { @keyframes 动画名称 {
from {当前状态的CSS} 0% {当前状态的CSS}
to {当前状态的CSS} 10% {当前状态的CSS}
}                   ····
                  100% {当前状态的CSS}
                }
2.使用动画：
animation: animation：动画名称动画时长速度曲线延迟时间重复次数动画方向执行完毕时状态；

例子：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 30px;
            height: 40px;
            background-color: skyblue;
            animation: change 3s;
            transform-style: preserve-3d;
            perspective: 800px;
            /* transform: rotateY(20deg); */
        }
        /* 动画一 */
        /* @keyframes change {
            from {transform: translateX(0);}
            to {transform: translateX(1000px) rotateX(360deg);}
        } */
        /* 动画二 */
        @keyframes change {
            0% {transform: translateX(0);}
            50% {transform: translateX(500px) scale(1.5) rotateX(360deg);}
            100% {transform: translate(500px) scale(1) rotateX(360deg);}
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>复制

属性详解：

动画名称：animation-name

动画时长：animation-duration

速度曲线：animation- time-function
linear：匀速
steps（3）：分3步完成（配合精灵图完成精灵动画）
ease：默认值，动画以低速开始，然后加快，在结束前变慢
ease-in：动画以低速开始
ease-out：动画以低速结束
ease-in-out：动画以低速开始，并以低速结束
补间动画：平滑运动
逐帧动画：一下一下=》steps（数字）====配合精灵图使用做成精灵动画
精灵动画：
1.准备显示区域
盒子尺寸与一张精灵小图尺寸相同
2.定义动画
移动背景图（移动距离=精灵图宽度）
3.使用动画
steps(N)，N与精灵小图个数相同

延迟时间：animation-delay
可以为正值也可以为负值。参数值为正时，表示延迟指定时间开始播放；参数为负时，表示跳过指定时间，并立即播放动画。
例如：animation: change 1s 2s;

重复次数：animation-iteration-count
例如：animation: change 1s 3;表示重复3次 infinite一直重复

播放方向：animation-direction
normal   以正常的方式播放动画
reverse   以相反的方向播放动画
alternate   播放动画时，奇数次（1、3、5 等）正常播放，偶数次（2、4、6 等）反向播放
alternate-reverse   播放动画时，奇数次（1、3、5 等）反向播放，偶数次（2、4、6 等）正常播放

结束时的状态：animation-fill-mode
forwards：动画执行完毕时停在结束状态
backwards：动画执行完毕时停在开始状态（默认值）

暂停动画：animation-play-stale: paused(暂停，配合hover使用)

动画与过渡的区别:

过渡：实现两个状态的变化过程

动画：实现多个状态的变化过程，并且过程可控（重复播放，最终画面，是否暂停）

无缝动画——走马灯：

复制开头动画到结尾位置（图片累加宽度=区域宽度）

代码：（用不了的图片可以自己去找一找）

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        .box {
            width: 600px;
            height: 112px;
            margin: 100px auto;
            border: 5px solid #000;
            overflow: hidden;
        }
        ul {
            display: flex;
            animation: 雷神 5s linear infinite;
        }
        img {
            display: block;
            width: 200px;
        }
        /* 定义动画，给ul使用，鼠标悬停停止 */
        @keyframes 雷神 {
            from {transform: translateX(0);}
            to {transform: translate(-800px);}
        }
        ul:hover {
            animation-play-state: paused;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li><img src="../雷电影.jpg" alt=""></li>
            <li><img src="../雷电影3.0.jpg" alt=""></li>
            <li><img src="https://pic2.zhimg.com/v2-45249e82081900c9ec94cd1a3ec1ab5e_r.jpg?source=12a79843" alt=""></li>
            <li><img src="https://ts1.cn.mm.bing.net/th/id/R-C.6e9f91afdd894711e30aaabcf6e56ae6?rik=NaSOd50Hx9odXg&riu=http://i1.hdslb.com/bfs/archive/3cb9c5fb3fb8f07b13cff8369d4c6c0f38ed26ba.jpg&ehk=Uf74zwTJt9h+fg8FDXuTJW5wzJaz6SV2MGaUcs7LbWo=&risl=&pid=ImgRaw&r=0" alt=""></li>
            <!-- 替身，填补露白 -->
            <li><img src="../雷电影.jpg" alt=""></li>
            <li><img src="../雷电影3.0.jpg" alt=""></li>
            <li><img src="https://pic2.zhimg.com/v2-45249e82081900c9ec94cd1a3ec1ab5e_r.jpg?source=12a79843" alt=""></li>
        </ul>
    </div>
</body>
</html>复制

精灵动画（动图）：

用速度steps(N)

代码：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 140px;
            height: 140px;
            border: 1px solid #000;
            background-image: url(../跑动精灵图.png);
            animation: move 1s infinite steps(12);
        }
        @keyframes move {
            from {background-position: 0 0;}
            to {background-position: -1680px 0;}
        }
        .d2 {
            width: 50px;
            height: 50px;
            border: 1px solid #000;
            background-image: url(../原神七大元素图标.gif);
            animation: run 7s infinite steps(7);
        }
        @keyframes run {
            from {background-position: -50px -20px;}
            to {background-position: -550px -20px;}
        }
    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>
</html>复制

多组动画（跑动的精灵图）：

代码：给一个元素用多个动画

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 140px;
            height: 140px;
            /* border: 1px solid #000; */
            background-image: url(../跑动精灵图.png);
            animation: run 1s infinite steps(12),move 3s forwards;
        }
        @keyframes run {
            from {background-position: 0 0;}
            to {background-position: -1680px 0;}
        }
        @keyframes move {
            from {transform: translate(0);}
            to {transform: translate(800px);}
        }
    </style>
</head>
<body>
    <div class="d1"></div>
</body>
</html>复制

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
	.father {
	perspective: 1000px;
	}
	.box {
	width: 200px;
	height: 200px;
	margin: 100px auto;
	background-color: pink;
	transition: all .5s;
	}

	.box:hover {
	/* 因为电脑是二维平面，因此默认状况下，z轴不可见 */
	/* 缺一不生效 */
	transform: translate3d(100px,200px,300px);
	}
	</style>
	</head>
	<body>
	<div class="father">
	<div class="box"></div>
	</div>
	</body>
	</html>

CSS（8）空间转换 动画