CSS--空间转换及动画

布满荆棘的人生 2024-03-22 17:05 3阅读 0赞

### 01-空间转换 ###

#### 空间转换简介 ####

*  空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。
 *  空间转换也叫 3D转换
 *  属性：transform

![在这里插入图片描述][319b3e5ea0404d4eb7c3db672930103e.png]

#### 平移 ####

transform: translate3d(x, y, z);
    transform: translateX();
    transform: translateY();
    transform: translateZ();

> 取值与平面转换相同
> 
> 默认情况下，Z 轴平移没有效果，原因：电脑屏幕默认是平面，无法显示 Z 轴平移效果

#### 视距 ####

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

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

属性：(添加给父级，取值范围 800-1200)

perspective: 视距;

![在这里插入图片描述][7d889304d0654712aaa8a27b8f100790.png]

#### 旋转 ####

*  Z 轴：rotateZ()
 *  X 轴：rotateX()
 *  Y 轴：rotateY()

#### 左手法则 ####

作用：根据旋转方向确定取值正负

使用：左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

![在这里插入图片描述][329b0d6c53544865a63725d55a011146.png]

#### rotate3d-了解 ####

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

#### 立体呈现 ####

作用：设置元素的子元素是位于 3D 空间中还是平面中

属性名：transform-style

属性值：

*  flat：子级处于平面中
 *  preserve-3d：子级处于 3D 空间

#### 案例-3d导航 ####

![在这里插入图片描述][83a4021216d44b118c63bd371cdeb48d.gif]

案例步骤：

1.  搭建立方体
    
    1.  绿色是立方体的前面
    2.  橙色是立方体的上面
2.  鼠标悬停，立方体旋转

![在这里插入图片描述][27cd1b7d0ec445c1ab5587c296987ed0.png]

![在这里插入图片描述][14d578e9c1824577b5ab00890bfec17b.png]

.nav li {
        
      position: relative;
      width: 100px;
      height: 40px;
      line-height: 40px;
      transition: all 0.5s;
    
      transform-style: preserve-3d;
    
      /* 为了看到橙色和绿色的移动过程，给立方体添加旋转 */
      /* transform: rotateX(-20deg) rotateY(30deg); */
    }
    
    .nav li a {
        
      position: absolute;
      left: 0;
      top: 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: rotateX(90deg) translateZ(20px);
    }
    
    .nav li:hover {
        
      transform: rotateX(-90deg);
    }

#### 缩放 ####

transform: scale3d(x, y, z);
    transform: scaleX();
    transform: scaleY();
    transform: scaleZ();

### 02-动画 ###

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

#### 动画实现步骤 ####

1.  定义动画

/* 方式一 */
    @keyframes 动画名称 {
        
      from {
        }
      to {
        }
    }
    
    /* 方式二 */
    @keyframes 动画名称 {
        
      0% {
        }
      10% {
        }
      ......
      100% {
        }
    }

1.  使用动画

animation: 动画名称 动画花费时长;

#### animation复合属性 ####

![在这里插入图片描述][09d5ee488c834fd1ba6d0e2ec6896ed1.png]

提示：

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

#### animation拆分写法 ####

![在这里插入图片描述][c8a2b08ccadc471c935ab96c31b510a3.png]

#### 案例-走马灯 ####

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/6ba7b702cec94b8fa5ee03937d1d1e29.gif][https_img-blog.csdnimg.cn_6ba7b702cec94b8fa5ee03937d1d1e29.gif]

*  HTML 结构

*  CSS 样式

.box {
        
      width: 600px;
      height: 112px;
      border: 5px solid #000;
      margin: 100px auto;
      overflow: hidden;
    }
    
    .box ul {
        
      display: flex;
      animation: move 6s infinite linear;
    }
    
    /* 定义位移动画；ul使用动画；鼠标悬停暂停动画 */
    @keyframes move {
        
      0% {
        
        transform: translate(0);
      }
      100% {
        
        transform: translate(-1400px);
      }
    }
    
    .box:hover ul {
        
      animation-play-state: paused;
    }

> 无缝动画原理：复制开头图片到结尾位置（图片累加宽度 = 区域宽度）

#### 精灵动画 ####

![在这里插入图片描述][57557806d78d4f2295f4be1a3a656c40.gif]

*  核心

![在这里插入图片描述][523bf72ff3344574aebb6e71c138bc7b.png]

*  制作步骤
    
    1.准备显示区域
    
    盒子尺寸与一张精灵小图尺寸相同
    
    2.定义动画
    
    移动背景图（移动距离 = 精灵图宽度）
    
    3.使用动画
    
    steps(N)，N 与精灵小图个数相同  
    ![在这里插入图片描述][594a736e2499400a9dc7c146728e8404.png]

div {
        
      width: 140px;
      height: 140px;
      border: 1px solid #000;
      background-image: url(./images/bg.png);
      animation: run 1s steps(12) infinite;
    }
    
    @keyframes run {
        
      from {
        
        background-position: 0 0;
      }
      to {
        
        background-position: -1680px 0;
      }
    }

#### 多组动画 ####

animation: 
      动画一,
      动画二,
      ... ...
    ;

[319b3e5ea0404d4eb7c3db672930103e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/5776832fa29f4660880e4c0ece2d9d8b.png
[7d889304d0654712aaa8a27b8f100790.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/fea9e608feb442ba85ef2b769675e196.png
[329b0d6c53544865a63725d55a011146.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/01130fb2bafa4b59aa63cb382869e93b.png
[83a4021216d44b118c63bd371cdeb48d.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/df7b534b7e604ef485f4d133eab2a518.png
[27cd1b7d0ec445c1ab5587c296987ed0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/899c5980dd0644ed8a582f7ca5cb04c2.png
[14d578e9c1824577b5ab00890bfec17b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/0ffa13fdb2904b46b8f3a26c0b82bb52.png
[09d5ee488c834fd1ba6d0e2ec6896ed1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/360fe669e49e4073935d34c2e21d58b9.png
[c8a2b08ccadc471c935ab96c31b510a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/c6f798f62e724d4785dcc11a5d7c78e4.png
[https_img-blog.csdnimg.cn_6ba7b702cec94b8fa5ee03937d1d1e29.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/e6a886fa8cf14ca3864443c733e4d6fa.png
[57557806d78d4f2295f4be1a3a656c40.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/6fe9d5c57ad746bab283ae7afc06df85.png
[523bf72ff3344574aebb6e71c138bc7b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/3a81d8fc19664976bdfdd1975ddae824.png
[594a736e2499400a9dc7c146728e8404.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/22/04be420392f249c2b28ae6b24a61cbd8.png