移动web空间位移、旋转、立体 动画

s9764
575 阅读5分钟

移动web空间位移、旋转、立体 动画

  • 空间位移、旋转、立体

1.盒子本身是2D平面，要想盒子呈现立体，就要给盒子添加 (transform- style:preserve-3d) 开始3d模型
2.要想看盒子有远小近大的视觉效果 ，就要给立体盒子的父元素加视距视距：perspctive:1000px; 这样看立体盒子就有远小近大的效果

左手准则：根据左手来判断物体旋转的方向 方便我们 判断代码如何执行

3. 错误写法，后面会覆盖前面的

​ transform: translateX(200px);

​ transform: translateY(200px);

​ transform: translateZ(200px);

4.复合写法，顺序不能乱

transform: translateX(100px) translateY(100px) translateZ(100px);

5.常用简写 X轴 Y轴 Z（空间）轴

​ transform: translate3d(100px,100px,100px);

1.位移

属性：

X轴水平移动

transform: translateX(360px)

Y轴垂直移动

transform:translateY(360px)

Z轴 空间移动

transform: translateZ(360px)

如图：

    <style>
        body {
            /* 视距 效果 */
            /* perspective: 1000px; */
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            transform: translateX(100px)  translateY(100px);
            /* 没给父元素加视距(perspective)，是看不出效果的 */
            /* transform: translateZ(300px); */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

2. 旋转

属性：

X轴水平旋转

transform: rotateX(360deg (角度单位))

Y轴垂直旋转

transform: rotateY(360deg (角度单位))

Z轴 空间旋转

transform: rotateZ(360deg (角度单位))

实操如下：


    <style>
        body {
            perspective: 1000px;
        }
        div {
            margin: 100px auto;
            width: 100px;
            height: 100px;
            background-color: aqua;
            transform: rotateZ(0deg);
            /* 旋转必须加过渡 */
            transition: 2s;
        }
        div:hover {
            /* Z轴 空间移动 */
            transform: rotateZ(360deg);
        }
        img {
            transition: 4s;
        }
        /* X轴 水平移动 */
        /* img:hover {
            transform: rotateX(360deg);
        } */
        img:hover {
            /* Y轴 垂直移动 */
            transform: rotateY(360deg);
        }
    </style>
</head>
<body>
    <div>Z轴旋转</div>
    <img src="./images/1.png" alt="">
</body>

3.透视效果（视距）

视距：(perspective:1000px)一般设置为1000px

1647523294870

示例：


    <style>
        body {
            /* 视距 一般随意设置1000px
              
            */
            perspective: 1000px;
        }
        .box {
            margin: 100px auto ;
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 错误写法，后面会覆盖前面的 */
            /* transform: translateX(200px);
            transform: translateY(200px);
            transform: translateZ(200px); */

            /* 复合写法，顺序不能乱 */
            /* transform: translateX(100px) translateY(100px) translateZ(100px); */

            /* 常用简写               X轴  Y轴   Z（空间）轴                  */
            transform: translate3d(100px,100px,100px);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>

4.3D盒子模型

1 静态结构

1 定一个父盒子 box 包装着6个小 平面 （立方体 有6个面）

2 写6个面

1 先使用定位 来重叠在一起 （方便后面一个一个的调整他们的位置 构造立方体 ）

2 使用 空间变换来实现 立方体！！

1 前： z轴 正 移动 +100

2 后： z轴 负 移动 -100

3 提前检查一下 有效果

1 给父元素 开启立体空间效果-立体呈现 3d呈现 (transform-style:preserve-3d)

2 给父元素 加旋转 transform: rotate3d(1,1,1,0deg)

1.静态结构

1.定义一个父盒子box 抱着6个小平面（立方体的6个面）

2.写6个面 ：1.先使用定位 来重叠在一起（后面方便一个一个来调他们的位置 来构建立方体）

2.使用空间转换来构建立方体

1.前：Z轴 正 移动 100px （50%）

2.后：Z轴 负 移动 -100px （50%）

3.右：X轴 正 移动 100px （50%） Y轴 旋转 90deg

4.左：X轴 负 移动 -100px （50%） Y轴 旋转 90deg

5.下：Y轴 正 移动 100px （50%） X轴 旋转 90deg

6.上：Y轴 负 移动 -100px （50%） X轴 旋转 90deg

3.开启立体空间： transform-style: preserve-3d;


    <title>07-立方体.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      .box {
        width: 200px;
        height: 200px;
        /* background-color: aqua; */
        position: relative;
        margin: 100px auto;
        /* 盒子开启 3D 模型 */
        transform-style:preserve-3d;
        transform: rotate3d(1,1,1,0deg);
        transition: 10s;

      }
      .box div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0.6;
      }

      .front {
        
        transform: translateZ(100px) ;
        background-color: salmon;

      }
      .back {
       /*旋转会影响当前元素所在的坐标系：强烈建议：先移动再旋转*/
        /*transform: rotateY(180deg) translateZ(100px);*/
        transform: translateZ(-100px) rotateZ(90deg);
        background-color: seagreen;
      }
      .left {
          /* 向X轴负向移动    再延Y轴负向旋转 */
          transform:translateX(-100px) rotateY(-90deg);
        background-color: lawngreen;
      }
      .right {
           /* 向X轴正向移动    再延Y轴正向旋转 */
          transform: translateX(100px) rotateY(90deg);
        background-color: yellow;
      }
      .up {
           /* 向Y轴正向移动    再延X轴正向旋转 */
          transform: translateY(100px) rotateX(90deg);
        background-color: aqua;
      }
      .bottom {
           /* 向Y轴负向移动    再延X轴负向旋转 */
          transform: translateY(-100px) rotateX(-90deg);
        background-color: purple;
      }
      .box:hover {
          transform: rotate3d(1,4,0,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="up">上</div>
      <div class="bottom">下</div>
    </div>
  </body>
</html>

  1 静态结构
    1 定一个父盒子 box 包装着6个小 平面 （立方体 有6个面）
    2 写6个面 
      1 先使用定位 来重叠在一起 （方便后面一个一个的调整他们的位置 构造立方体 ）

  2 使用 空间变换来实现 立方体！！ 
    1 前： z轴 正 移动   +100
    2 后： z轴 负 移动   -100  

  3 提前检查一下 有效果
    1 给box 开启立体空间效果-立体呈现 3d呈现  
    2 给box 旋转 


 1.静态结构
1.定义一个父盒子box 抱着6个小平面（立方体的6个面）
2.写6个面 ：1.先使用定位  来重叠在一起（后面方便一个一个来调他们的位置 来构建立方体）

2.使用空间转换来构建立方体

    1.前：Z轴  正 移动   100px （50%）
    2.后：Z轴  负 移动  -100px （50%）
    3.右：X轴  正 移动   100px （50%）  Y轴  旋转 90deg
    4.左：X轴  负 移动  -100px （50%）  Y轴  旋转 90deg
    5.下：Y轴  正 移动   100px （50%）  X轴  旋转 90deg
    6.上：Y轴  负 移动  -100px （50%）  X轴  旋转 90deg

    3.开启立体空间： transform-style: preserve-3d;


        旋转 transform: rotate3d(1,1,1,50deg);

5. 案例-3D导航条

代码示例：

<!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>Document</title>
    <style>
        ul {
            list-style: none;
        }
        li {
            position: relative;
            float: left;
            perspective: 1000px;
        }
        a {
            display: block;
            transform-style: preserve-3d;
            transform: rotate3d(1,1,1,0deg);
            text-decoration: none;
            width: 100px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            transition: 1s;
            color: white;
        }
        a div {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .fornt {
            transform: translateZ(20px);
            background-color: green;
        }
        .up {
            transform: translateY(-20px) rotateX(90deg);
            background-color: orange;
        }
        a:hover {
            transform: rotateX(-90deg);
        }
    </style>
</head>
<body>
    <ul>
        <li>
            <a href="#">
                <div class="fornt">登录</div>
                <div class="up">index</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="fornt">登录</div>
                <div class="up">index</div>
            </a>
        </li>
        <li>
            <a href="#">
                <div class="fornt">登录</div>
                <div class="up">index</div>
            </a>
        </li>

    </ul>
</body>
</html>

动画

属性：

animation: move 1s linear 3s alternate infinite forwards (连写不按顺序： 名称 持续时间 匀速 延迟时间 播放次数 执行方向 保持结束时的状态)

1.animation-name: move ;(动画名称)

2.animation-duration: 4s ;(动画持续时间)

3.animation-timing-function:linear(匀速)/steps(n);动画帧数(逐帧)

4.animation-delay: 3s ;(延迟开始动画时间)

5.animation-iteration-count:forwards;(无限循环播放)

6.animation-direction: alternate;(执行方向 先正再反 常用)/alternate-reverse(执行方向 反正再正 不常用)

7.animation-fill-mode:forwards;(保持结束时最后时的状态)

8.animation-play-state: paused;(暂停)/running(播放)

1647523114130

代码示例：

<!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>Document</title>
    <style>
        .box {
            /* margin: 50px auto; */
            width: 200px;
            height: 200px;
            background-color: aqua;
            /* animation: move 4s infinite alternate; */
            /* 动画名称 */
            animation-name: move;
            /* 动画持续时间 */
            animation-duration: 4s ;
            /* 延迟时间 */
            /* animation-delay: 3s; */
            /*  同时设置  动画开始是的第一帧 (backwards) 和 结束时最后时的状态(forwards)  */
            /* animation-fill-mode: both; */
            /* 动画播放次数  数字(n)几次    无限循环  (infinite) */
            animation-iteration-count: infinite;
            /* 动画执行方向 reverse 为反方向执行  alternate 为正方向执行再回来 */
            animation-direction: alternate-reverse;
        }
        .box:hover {
            /* 鼠标悬停时 暂停 */
            animation-play-state: paused;
        }
        @keyframes move {
            /* 定义动画两种方式：
            1.开始和结束 */
            from{
                margin-left: 0px;
                background-color: red;
            }
            to {
                margin-left: 1000px;
                background-color: blue;
                border-radius: 50%;
            }

            /* 2.百分比，每百分几的是就是什么模样 */
            /* 0% {
                background-color: black;
            }
            30% {
                width: 300px;
                height: 500px;
                background-color: blue;
            }
            80% {
                width: 1000px;
                height: 200px;
                border-radius: 50%;
            }
            100% {
                background-color: green;
                border-radius: 50%;
            } */
        }
        
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

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>Document</title>
    <style>
        .box {
            width: 140px;
            height: 140px;
            border: 10px solid green;
            background: url("./images/bg.png");
            /* 可以用并集选择器来实现多重效果 */
            animation:
             move 1s steps(12) infinite,
             change 7s linear;
        }
        /* 精灵图片动起来 */
        @keyframes move {
            to {
                background-position: -1680px 0;
            }
        }
        /* 外面盒子移动 */
        @keyframes change {
            to {
                transform: translateX(1000px);
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
</body>
</html>

2.案例-阴阳师

代码示例：
<!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>Document</title>
    <style>
        .box {
            position: relative;
            width: 146px;
            height: 288px;
            background-image: url("./images/sprites.png");
         
        }
        .box::before {
            content: '';
            width: 106px;
            height: 106px;
           background-image: url("./images/code.png");
           background-size: 100%,100%;
            position: absolute;
            top: 43px;
            left: 50%;
            transform: translateX(-50%);
        }
        .box::after {
            content: '';
            position: absolute;
            top: 43px;
            left: 50%;
            transform:translateX(-50%);
            width: 106px;
            height: 14px;
            background-image: url("./images/line.png");
            animation: ani 1s alternate infinite;
        }
        @keyframes ani {
            to {
                transform: translate(-50% ,105px);
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

3.案例-走马灯

1 静态 html结构

box 显示 边框 里面 大的div 存放多个小图片 后期移动的时候 只移动装着小图片的盒子就行

2 动态效果

1 inner盒子 从右往左移动

3 无缝滚动 技巧

1 两个大盒子

1 外层盒子 设置 眼看宽度和高度

2 里层盒子 用来存放多张图片（里面要存放多少张图片 设置宽度为多少！！ ）

2 真实存放的图片张数 比实际的要多

1 多多少 看你一下的外层盒子能装几张 （浮动）

3 设置动画

1 设置内层盒子的位移 等于 真实的那几张图片的位移！

2 设置动画无线滚动！！

代码示例：
<!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>Document</title>
    <style>
          /* <!-- 1 静态 html结构
    box 显示 边框 里面 大的div 存放多个小图片 后期移动的时候 只移动装着小图片的盒子就行 

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

  3 无缝滚动 技巧
    1 两个大盒子
      1 外层盒子 设置 眼看宽度和高度 
      2 里层盒子 用来存放多张图片（里面要存放多少张图片 设置宽度为多少！！ ）
    2 真实存放的图片张数 比实际的要多
      1 多多少 看你一下的外层盒子能装几张 （浮动）
    3 设置动画
      1 设置内层盒子的位移 等于 真实的那几张图片的位移！ 
      2 设置动画无线滚动！！
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box {
        width: 620px;
        height: 120px;
        border: 10px solid red;
        overflow: hidden;
      }
      .box div {
      
      width: 2000px;
      /* height: 100px; */
      animation: move 6s linear infinite;
      }
      img {
        float: left;
        width: 200px;
        height: 100px;
      }
      @keyframes move {
        to {
          transform: translateX(-1400px);
        }
      }
      div:hover {
        animation-play-state: paused;
      }
    </style>
</head>
<body>
    <div class="box">
      <div>
        <img src="./images/1.jpg" alt="">
        <img src="./images/2.jpg" alt="">
        <img src="./images/3.jpg" alt="">
        <img src="./images/4.jpg" alt="">
        <img src="./images/5.jpg" alt="">
        <img src="./images/6.jpg" alt="">
        <img src="./images/7.jpg" alt="">
        <img src="./images/1.jpg" alt="">
        <img src="./images/2.jpg" alt="">
        <img src="./images/3.jpg" alt="">
      </div>
    </div>
</body>
</html>
avatar
文章
阅读
粉丝