空间转换+动画

空间转换（3D转换）

作用：使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：是从坐标轴角度定义的。 x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。
属性：transform

空间位移trasnlate

目标：使用translate实现元素空间位移效果

语法：

 transform: translate(x,y);中间使用“,”隔开
 transform: translateX(值);沿着X轴移动
 transform: translateY(值);沿着Y轴移动
 transform: translateZ(值);沿着Z轴移动
 transform: translate3d(x, y, z);沿着X,Y,三轴移动

复制代码

取值（正负均可）
- 像素单位数值
- 百分比

透视erspective

作用：使用perspective属性实现透视效果，实现近大远小，近实远虚的视觉效果。

perspective也叫视距，指人的眼睛到屏幕的距离，出现Z轴变化的时候需要添加给元素。

语法：

perspective: 值;
复制代码

取值：像素单位数值，数值一般在800 – 1200。

书写位置：给盒子的父级添加

空间旋转rotate

作用：使用rotate实现元素空间旋转效果（单位deg）

语法：

 transform: rotateZ(值+deg);
 transform: rotateX(值+deg);
 transform: rotateY(值+deg);
复制代码

判断旋转方向：

左手法则：左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

沿着多条轴进行旋转

rotate3d(x, y, z, 角度度数) ：用来设置自定义旋转轴的位置及旋转的角度
x，y，z 取值为0-1之间的数字

语法：transform: rotate3d(1, 1, 1, 360deg);
/* 这个方向相当于正方形中左上角指向右下角*/
先确定x跟y两个轴形成的平面方向，长度计算为勾股定理
复制代码

立体呈现 transform-style: preserve-3d

作用：使用transform-style: preserve-3d呈现立体图形

Tip :perspective只增加近大远小、近实远虚的视觉效果,无法呈现立体效果。

语法：(给父级添加)

/*使子元素处于真正的3d空间*/
transform-style: preserve-3d;
复制代码

使用步骤：

盒子父元素添加transform-style: preserve-3d；
按需求设置子盒子的位置（位移或旋转）

注意：空间内，转换元素都有自已独立的坐标轴，互不干扰

空间缩放scale

作用：：使用scale实现空间缩放效果

 transform: scaleX(倍数);
 transform: scaleY(倍数);
 transform: scaleZ(倍数);
 transform: scale3d(x, y, z)
复制代码

案例

1.制作立方体步骤

先建立一个大盒子box，装入6个平面

    <div class="box">
        <div class="front">前面</div>
        <div class="back">后面</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
        <div class="top">上面</div>
        <div class="buttom">下面</div>
    </div>
复制代码

再使用定位的方式将6个盒子层叠在一起
定位好之后给盒子分别加上不同的颜色便于区分

对6个盒子进行3D空间上的移动，挪移到相应的位置 强烈建议先平移后旋转（移动距离一般为自身宽高的一半）

    <style>
        /* 给盒子添加颜色 */
        /* 前面的盒子往前走一半的宽度 */
        .front {
            background-color: red;
            transform: translateZ(100px);
        }

        /* 后面的盒子往后走一半的宽度 */
        .back {
            background-color: yellow;
            transform: translateZ(-100px) rotateY(180deg);

        }

        /* 往左走一半的宽度,并沿着Y轴旋转-90度 */
        .left {
            background-color: blue;
            transform: translateX(-100px) rotateY(-90deg);
        }

        /* 往右走一半的宽度,并沿着Y轴旋转90度 */

        .right {
            background-color: greenyellow;
            transform: translateX(100px) rotateY(90deg);

        }

        /* 往上走一半的宽度,并沿着X轴旋转90度 */
        .top {
            background-color: pink;
            transform: translateY(-100px) rotateX(90deg);

        }

        /* 往下走一半的宽度,并沿着X轴旋转-90度 */
        .buttom {
            background-color: black;
            transform: translateY(100px) rotateX(-90deg);
        }</style>
复制代码

最后不要忘记给盒子的父级加上3D效果跟透视

    <style>
        .box {
            width: 200px;
            height: 200px;
            /* 定位 */
            position: relative;
            margin: 100px auto;
            background-color: pink;
            /* 给父级添加3d效果 */
            transform-style: preserve-3d;
            perspective: 1000px;
            /* 沿着多条轴旋转并透明 */
            transform: rotate3d(1, 1, 1, 30deg);
            transition: all 3s;
            line-height: 200px;
            text-align: center;
        }
   </style> 
复制代码

完整语法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>立方体</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            /* 定位 */
            position: relative;
            margin: 100px auto;
            background-color: pink;
            /* 给父级添加3d效果 */
            transform-style: preserve-3d;
            perspective: 1000px;
            /* 沿着多条轴旋转并透明 */
            transform: rotate3d(1, 1, 1, 30deg);
            transition: all 3s;
            line-height: 200px;
            text-align: center;
        }

        /* 亲儿子选择器  */
        .box>div {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 0;
            left: 0;
        }

        /* 给盒子添加颜色 */
        /* 前面的盒子往前走一半的宽度 */
        .front {
            background-color: red;
            transform: translateZ(100px);
        }

        /* 后面的盒子往后走一半的宽度 */
        .back {
            background-color: yellow;
            transform: translateZ(-100px) rotateY(180deg);
        }

        /* 往左走一半的宽度,并沿着Y轴旋转-90度 */
        .left {
            background-color: blue;
            transform: translateX(-100px) rotateY(-90deg);
        }

        /* 往右走一半的宽度,并沿着Y轴旋转90度 */

        .right {
            background-color: greenyellow;
            transform: translateX(100px) rotateY(90deg);
        }

        /* 往上走一半的宽度,并沿着X轴旋转90度 */
        .top {
            background-color: pink;
            transform: translateY(-100px) rotateX(90deg);
        }

        /* 往下走一半的宽度,并沿着X轴旋转-90度 */
        .buttom {
            background-color: black;
            transform: translateY(100px) rotateX(-90deg);
        }

        .box:hover {
            transform: rotateX(270deg) rotateY(360deg);
        }
    </style>

</head>

<body>
    <div class="box">
        <div class="front">前面</div>
        <div class="back">后面</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
        <div class="top">上面</div>
        <div class="buttom">下面</div>
    </div>
</body>

</html>
复制代码

2.制作3D导航

制作3D导航效果：需要有一个大盒子将这3个小盒子装一起，利用ul>li的方式，并添加浮动将三个盒子横排贴在一起

 <div class="box">
        <ul>
            <li><a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li><a href="#">首页</a>
                <a href="#">Index</a>
            </li>
            <li><a href="#">首页</a>
                <a href="#">Index</a>
            </li>
        </ul>
    </div>
复制代码

利用定位将上下的盒子叠在一起，a是行内元素，需要将a转化成块级元素并设置宽高

动画

定义使用动画

作用：使用animation添加动画效果

动画效果：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
构成动画的最小单元：帧或动画帧

实现步骤：

定义动画

/*第一种写法： */      
@keyframes 动画名称 {
            from {

            }
            to{
                
            }
        }
/*实现的是两个状态的呈现*/
/*第二种写法：实现的是多个过程的呈现*/
@keyframes 动画名称 {
  	0%{}
    50% {
        width: 300px;

    100% {
        width: 400px;
    }
复制代码

注意：如果动画的起点不变，可以省略from或者0%这个阶段

使用动画

animation: name duration timing-function delay iteration-count direction fill-mode;
/*animatino:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态*/

复制代码

注意：

动画名称和动画时长必须赋值
取值不分先后顺序
如果有2个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

动画属性

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards：最后一帧状态 backwards：第一帧状态
animation-timing-function	速度曲线	steps(数字)：逐帧动画 linear：匀速变化
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-direction	暂停动画	paused为暂停，通常配合:hover使用

使用逐帧动画steps（）

目标：使用steps实现逐帧动画

steps（）中的数字，取决于动画图片中的份数

份数：一个背景图片分为12份，就写steps（12）

语法：

animation-timing-function: steps(N)；
或者在animation复合写法中直接写steps()
animation：名称 时长 steps()  
复制代码

实现逐帧动画的步骤：

准备显示区域

设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图

定义动画

改变背景图的位置（移动的距离就是精灵图的宽度）

使用动画

添加速度曲线steps(N)，N与精灵图上小图个数相同
添加无限重复效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走马灯</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            /* box-sizing: border-box; */
        }

        li {
            list-style: none;
        }

        .box {
            width: 600px;
            border: 10px solid #000;
            overflow: hidden;
            margin: 50px auto;
            /* animation: move 5s linear infinite; */

        }

        .box ul {
            width: 2000px;
            /* overflow: hidden; */
            animation: move 5s linear infinite;
        }

        .box ul li {
            float: left;
        }

        .box img {
            width: 200px;
            vertical-align: middle;
        }

        @keyframes move {
            to {
                transform: translateX(-1400px);
            }
        }

        .box:hover ul {
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <!-- 1 静态 html结构
    box 显示 边框 里面 大的div 存放多个小图片 后期移动的时候 只移动装着小图片的盒子就行 

  2 动态效果
    1 inner盒子 从右往左移动  

  3 无缝滚动 技巧
    1 两个大盒子
      1 外层盒子 设置 眼看宽度和高度 
      2 里层盒子 用来存放多张图片（里面要存放多少张图片 设置宽度为多少！！ ）
    2 真实存放的图片张数 比实际的要多
      1 多多少 看你一下的外层盒子能装几张 （浮动）
    3 设置动画
      1 设置内层盒子的位移 等于 真实的那几张图片的位移！ 
      2 设置动画无线滚动！！  -->
    <div class="box">
        <ul>
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
            <!-- 走完7张图之后，显示框内会全是空白，这个时候放3张首图来欺骗用户，施以障眼法 -->
            <!-- 图片走到其7张，瞬间回到第二遍，无缝衔接第二次的前三张 -->
            <!-- 补充三张图片来过度 -->
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
        </ul>
    </div>
</body>

</html>
复制代码

多组动画

作用：能够使用animation属性给一个元素添加多个动画效果

语法：

 animation: 
           动画1,
           动画2,
           动画n;
复制代码

动画之间使用“,”隔开

文章版权归作者所有，未经允许请勿转载。

THE END

代码人生

铃声多多v8.7.74.0最新vip破解版海量手机铃声

聊聊MySQL分页优化

CSS 盒模型 box-sizing

【Flutter 专题】121 图解简易 Slider 滑动条

浅谈py的负数除法

容器技术基石：Linux namespace 和 cgroups，运维了解一下

前端web之转换以及动画

空间转换+动画

空间转换（3D转换）

空间位移trasnlate

透视erspective

空间旋转rotate

立体呈现 transform-style: preserve-3d

空间缩放scale

案例

1.制作立方体步骤

2.制作3D导航

动画

定义使用动画

使用逐帧动画steps（）

多组动画

铃声多多v8.7.74.0最新vip破解版 海量手机铃声

聊聊MySQL分页优化

CSS 盒模型 box-sizing

【Flutter 专题】121 图解简易 Slider 滑动条

浅谈py的负数除法

容器技术基石：Linux namespace 和 cgroups，运维了解一下

前端web之转换以及动画

空间转换+动画

空间转换（3D转换）

空间位移trasnlate

透视erspective

空间旋转rotate

立体呈现 transform-style: preserve-3d

空间缩放scale

案例

1.制作立方体步骤

2.制作3D导航

动画

定义使用动画

使用逐帧动画steps（）

多组动画

铃声多多v8.7.74.0最新vip破解版海量手机铃声