Day02 移动web

空间转换 — transform

空间转换 — 位移、旋转、缩放

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

位移 — translate

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

取值（正负均可）

像素单位数值
百分比

透视 — perspecitve

属性（添加给父级）

perspective:值;
取值：像素单位数值，数值一般在800–1200。
透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

作用

空间转换时，为元素添加近大远小、近实远虚的视觉效果

思考：生活中，同一个物体，观察距离不同，视觉上有什么区别？

答：近大远小、近清楚远模糊
思考：默认情况下，为什么无法观察到Z轴位移效果？

答：Z轴是视线方向，移动效果应该是距离的远或近，电脑屏幕是平面，默认无法观察远近效果

<!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;
        }
        /* 视距
        设置 人的眼睛到时被观察物体之前的距离
        
        如何去使用
        1。代码规范 要给被观察的物体的父元素使用！！
        */
        body{
              /* 视距 一般随意的设置1000 */
              perspective: 1000px;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: aqua;

          

            /* 设置在x轴方向上移动*/
            /* transform: translateX(-300px); */
            /* 设置在y轴方向上移动*/
            /* transform: translateY(-300px); */

            /* 设置在Z轴方向上移动
            记起来Z轴方向 正方向 屏幕指向外面

            默认情况下   不可能让div 飘出屏幕外面！
            默认情况下 看不到时 z轴上的变化
            */
            transform: translateZ(100px);

        }
    </style>
</head>
<body>
    <div>空间位移</div>
</body>
</html>
<!-- 当我们想要看见元素 在 Z轴上的变化的时候 需要给被观察的物体添加 视距1000px -->

旋转 — rotate

语法

transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值);

左手法则

判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

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

<!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>06-空间旋转-Z轴</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: aqua;
            /* 沿着Z轴做旋转 */
            transform: rotateZ(0deg);
        }
    </style>
</head>
<body>
    <div>旋转</div>
</body>
</html>

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

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果。

实现方法

添加transform-style: preserve-3d;
使子元素处于真正的3d空间

呈现立体图形步骤

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

注意

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

缩放 — translate

语法

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

动画 — animation

思考：过渡可以实现什么效果？

答：实现2个状态间的变化过程

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

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta 
    name="viewport" 
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minmum-scale=1,user-scalable=no" 
    />
    <title>动画实现步骤</title>
 <style>
     *{
         margin: 0;
         padding: 0;
         box-sizing: border-box;
     }
     div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 50px auto;
        animation: ans_1 3s;
     }
     @keyframes ans_1{
         0%{
             background-color: red;
             
         }
        30%{
            background-color: blue;
            width: 250px;
             height: 30px;
        }
        100%{
            background-color: yellow;
            border-radius: 50%;
        }
     }
 </style>

</head>
<body>
    <div>动画的体验O(∩_∩)O哈哈~</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-动画实现步骤.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* margin: 200px auto; */

        /* 动画的 复合写法 */
        /* animation: ani_1 5s; */

        /* 单个讲解属性 */

        /* 动画的名称 */
        animation-name: ani_1;
        /* 动画的持续时间 */
        animation-duration: 2s;
        /* 动画的延迟时间 */
        /* animation-delay: 3s; */
        /* 
        动画正常播放之外的状态（延迟、播放结束） 
        在延迟的时间内  
        1 显示的是 自身的颜色 属性 
        2 设置  在延迟的时间内 显示 0% 画面  backwards
        3 整个动画播放完毕了 动画 停留在最后一帧的画面 还是回到 自身的属性 画面上 
          设置动画 播放完毕了 停留在 最后一帧画面   forwards

        4 both  
          同时设置了  backwards 和  forwards

         */
        /* animation-fill-mode: both; */

        /* 
        设置动画的播放次数 2 
         */
        animation-iteration-count: infinite;

        /* 
        设置动画的播放的方向  animation-direction

        1 默认值  normal    先正再正      常用
        2 alternate   先正再反   常用
        3 reverse   先反再反
        4 alternate-reverse  先反再正

         */
        animation-direction: alternate-reverse;
      }

      @keyframes ani_1 {
        0% {
          background-color: black;
          margin-left: 0;
        }

        100% {
          background-color: yellow;
          border-radius: 50%;
          margin-left: 1000px;
        }
      }
    </style>
  </head>
  <body>
    <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,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>01-动画实现步骤.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      div {
        width: 200px;
        height: 200px;
        background-color: aqua;
        /* margin: 200px auto; */

        /* 动画的 复合写法 */
        /* animation: ani_1 5s; */

        /* 单个讲解属性 */

        /* 动画的名称 */
        animation-name: ani_1;
        /* 动画的持续时间 */
        animation-duration: 2s;
        /* 动画的延迟时间 */
        /* animation-delay: 3s; */
        /* 
        动画正常播放之外的状态（延迟、播放结束） 
        在延迟的时间内  
        1 显示的是 自身的颜色 属性 
        2 设置  在延迟的时间内 显示 0% 画面  backwards
        3 整个动画播放完毕了 动画 停留在最后一帧的画面 还是回到 自身的属性 画面上 
          设置动画 播放完毕了 停留在 最后一帧画面   forwards

        4 both  
          同时设置了  backwards 和  forwards

         */
        /* animation-fill-mode: both; */

        /* 
        设置动画的播放次数 2 
         */
        animation-iteration-count: infinite;

        /* 
        设置动画的播放的方向  animation-direction

        1 默认值  normal    先正再正      常用
        2 alternate   先正再反   常用
        3 reverse   先反再反
        4 alternate-reverse  先反再正

         */
        animation-direction: alternate-reverse;
      }

      @keyframes ani_1 {
        0% {
          background-color: black;
          margin-left: 0;
        }

        100% {
          background-color: yellow;
          border-radius: 50%;
          margin-left: 1000px;
        }
      }
    </style>
  </head>
  <body>
    <div>动画的体验</div>
  </body>
</html>

动画属性

复合写法动画

<!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;
        }
        div{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            background-color: aqua;
            /* 
            1、动画 必须要用两个属性 有 动画名称(name) 动画播放 时间(duration)
            2、其他属性 看需求来添加
            无限播放
            正反-正反
            匀速
            3、不区顺序 例外
            播放时间一定要在 廷迟时间 前面！！

            */

            /* 可以使用复合写法 */
            animation:ani_1 1s 3s linear alternate infinite  ;
        }
        @keyframes ani_1 {
            100%{
                border-radius: 50%;
            }
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

steps实现逐帧动画

逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。
animation-timing-function:steps(N)；

将动画过程等分成N份

多组动画

思考：如果想让小人跑远一些，该如何实现？

答：精灵动画的同时添加盒子位移动画。

Day02移动web

Day02 移动web

空间转换 — transform

位移 — translate

取值（正负均可）

透视 — perspecitve

旋转 — rotate

缩放 — translate

动画 — animation