H5_Day3

一、transform变换

概述：在HTML5中，可以实现元素的2D、3D变换

主要可以实现：缩放比例【scale】、平移【translate】、旋转【rotate】

1.1、2D变换动画

如果写了多个transform样式，则后面写的transform覆盖前面的，即只有最后一个起作用。

1.1.1缩放【scale】

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<style>
       *{
           margin: 0;
           padding: 0;
       }
       div{
           width: 200px;
           height: 200px;
           margin:100px auto;
           background:url(../images/3.png) no-repeat;
           border:2px dashed black;
           /* transform的缩放属性————scale() */
           /* 里面放一个数字时表示元素的宽高按比例缩放N倍。负值就让图片倒过来 */
           transform:scale(1.5);
       }
   </style>

 

?
1
2
/* 里面放两个参数：第一个参数表示宽是原来的多少倍，第二个参数表示高是原来的多少倍 */
            transform:scale(2,1);

 1.1.2、旋转【rotate】

?
1
2
/* transform的旋转属性————rotate,参数的值为x deg，deg是角度的缩写 */
            transform: rotate(30deg);

 图片绕着它的几何中心进行旋转。

1.1.3、平移【translate】

?
1
2
3
/* transform的平移属性————translate() */
           /* 第一个参数表示水平平移，正数为右负数为左；第二个参数表示竖直平移，正数为向下，负数为向上 */
           transform:translate(20px,20px);

 1.2、3D变换动画

1.2.1、3D旋转

通过rotateX,rotateY,rorateZ，来实现，旋转的单位同样是deg

如果相比较明显的看到3D旋转效果，需要父子盒子嵌套使用。而且父盒子需要加上景深效果，即perspective：npx；代表人眼距离这个盒子的距离（一般设置的较大）

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
      *{
          margin: 0;
          padding: 0;
      }
      .box{
          width: 200px;
          height: 200px;
          border:1px solid black;
          /* 景深效果 */
          perspective: 10000px;
          margin:100px auto;
      }
      .cur{
          width: 200px;
          height: 200px;
          background: url(../images/1.jpg);
          /* 加上3D旋转样式 */
          transform: rotateX(0deg);
      }
  </style>

 1.2.2、3D平移

通过translateX，translateY，translateZ来实现，属性值为npx。

同样的，需要父子盒子嵌套才能看的清除，同时父盒子需要加上景深样式，perspective。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<style>
       *{
           margin: 0;
           padding: 0;
       }
       .box{
           width: 200px;
           height: 200px;
           border:1px solid black;
           /* 景深效果 */
           perspective: 10000px;
           margin:100px auto;
       }
       .cur{
           width: 200px;
           height: 200px;
           background: url(../images/1.jpg);
           /* 加上3D平移样式 */
           transform: translateX(0px);
       }
   </style>

translateX：值为正数则向右平移，值为负数则向左平移。

translateY：值为正数则向下平移，值为负数则向上平移。

translateZ：值为正数则离屏幕越来越近，值为负数则离屏幕越来越远。

注：transform是一个综合属性，可以同时实现平移、旋转和缩放，不同的样式之间空格隔开即可。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        border:1px solid black;
        /* 景深效果 */
        perspective: 10000px;
        margin:100px auto;
    }
    .cur{
        width: 200px;
        height: 200px;
        background: url(../images/1.jpg);
        transform:rotateX(0deg) translateY(0px);
    }
</style>

当我们的元素进行3D旋转时，整体的三维坐标体系的方向会发生改变，跟谁先谁后没有关系。

比如当rotateY（87deg）时再translateZ（10px）此时的z轴平移跟刚开始不一样。即z轴的方向发生了改变。

 1.3、小练习

模板字符串：当带有变量的字符串连接时比较麻烦，可用模板字符串来直接连接，省去很多连字符让代码看起来简洁。

`${变量}`

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!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>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 400px;
            height: 400px;
            margin:100px auto;
            border:1px solid black;
        }
        .cur{
            width: 400px;
            height: 200px;
            background: red;
        }
        p{
            margin-top:10px
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="cur"></div>
        <p>
            RX:<input type="range" min="0" max = "360" value = "0" name = "rx"><span>0</span>
        </p>
        <p>
            RY:<input type="range" min="0" max = "360" value = "0" name = "ry"><span>0</span>
        </p>
        <p>
            RZ:<input type="range" min="0" max = "360" value = "0"  name = "rz"><span>0</span>
        </p>
        <p>
            TX:<input type="range" min="0" max = "360" value = "0"  name = "tx"><span>0</span>
        </p>
        <p>
            TY:<input type="range" min="0" max = "360" value = "0"  name = "ty"><span>0</span>
        </p>
        <p>
            TZ:<input type="range" min="0" max = "360" value = "0"  name = "tz"><span>0</span>
        </p>
    </div>
</body>
</html>
<script>
    //获取到所有的input节点
    var ranges = document.querySelectorAll("input");
    //获取所有的span标签
    var spans = document.querySelectorAll("span");
    //获取cur标签
    var cur = document.querySelector(".cur");
    var rx = "rotateX(0deg)",ry = "rotateY(0deg)",rz = "rotateZ(0deg)";
    var tx = "translateX(0px)",ty = "translateY(0px)",tz = "translateZ(0px)";
    //批量添加事件
    for(var i = 0 ; i < ranges.length ; i++)
    {
        //用六个IIFE，每个IIFE有自己独立的作用域。
        +function(index){
            ranges[index].oninput = function(){
                //改变span标签的文本
                spans[index].innerHTML = this.value;
                //改变transform里面的值
                switch(this.name){
                    case "rx":
                        rx = `rotateX(${this.value}deg)`;
                        break;
                    case "ry":
                        ry = `rotateY(${this.value}deg)`;
                        break;
                    case "rz":
                        rz = `rotateZ(${this.value}deg)`;
                        break;
                    case "tx":
                        tx = `translateX(${this.value}px)`;
                        break;
                    case "ty":
                        ty = `translateY(${this.value}px)`;
                        break;
                    case "tz":
                        tz = `translateZ(${this.value}px)`;
                        break;   
                }
                cur.style.transform = rx+" "+ry+" "+rz+" "+tx+" "+ty+" "+tz;
            }
        }(i);
    }
</script>

 二、animation动画

作用：给元素添加一些动画，需要注意的是，当前这个样式是一个综合样式。

基本语法格式：

animation:动画名称 动画总时间 动画速率 动画延迟时间 动画执行次数 动画是否反向执行 动画执行完后是否返回原点。

animation-name:动画名字，名字必须符合命名标识符规范

animation-duration:总时间【s/ms】

animation-timing-function:速率 linear（匀速）

animation-delay:第一次动画延迟时间，这个属性值可以为负数，代表提前。

animation-iteration-count:动画执行次数【数字或者infinite】

animation-direction:动画是否反向执行，属性值为alternate代表反向执行【注意，反向执行也是占动画执行次数的】

animation-fill-mode:动画执行完后是否返回原点。默认返回原点，如果值为forwards则代表不返回原点。

animation分为声明和调用两部分。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .container{
            width: 400px;
            height: 400px;
            position:relative;
            margin:100px auto;
            /* 动画调用 */
            animation:donghua 2s linear 0s infinite forwards;
        }
        .container div:nth-child(1){
            width: 200px;
            height: 200px;
            position: absolute;
            background: green;
            border-radius:0 300px 0 300px;
        }
        .container div:nth-child(2){
            width: 200px;
            height: 200px;
            position:absolute;
            background: green;
            left:200px;
            border-radius:300px 0 300px 0;
        }
        .container div:nth-child(3){
            width: 200px;
            height: 200px;
            position: absolute;
            background: green;
            border-radius:300px 0 300px 0;
            top:200px;
        }
        .container div:nth-child(4){
            width: 200px;
            height: 200px;
            position: absolute;
            background: green;
            border-radius:0 300px 0 300px;
            left: 200px;
            top: 200px;
        }
        /* 声明动画 */
        @-webkit-keyframes donghua{
            from{
                transform:rotate(0deg);
            }
            to{
                transform:rotate(360deg);
            }
        }
        /* 鼠标移上停止 */
        .container:hover{
            animation-play-state: paused;
        }
    </style>

 animation-play-state:监测动画的执行状态，默认值为running表示动画在执行，若添加属性值为paused，则动画暂停。

3.3、正方体

1.如果在一个实例中，某个标签既是舞台又是舞者，则要给他加上transform-style:preserve-3d；

2.transform是一个综合属性，不能够分开写否则后面的会覆盖前面的，只能写在同一条语句中；

3.涉及到3D动画的需要给父盒子加上景深效果；

4.注意子盒子li在经过rotateX等旋转变换后，它们的各自的坐标系其实已经发生了变化，在进行平移操作时要根据变化后的坐标系来设置相应的XYZ值。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 200px;
        margin:100px auto;
        /* 景深效果 */
        perspective: 3000px;
    }
    ul{
        width: 200px;
        height: 200px;
        list-style:none;
        /* 当一个盒子既是舞台又是舞者时，需要给他加上transform-style:preserve-3d; */
        transform-style:preserve-3d;
        position: relative;
        /* 动画的调用 */
        animation:donghua 2s linear 0s infinite forwards;
    }
    li{
        width: 200px;
        height: 200px;
        position: absolute;
        opacity:.5;
    }
    li:nth-child(1){
        transform:translateZ(100px);
        background: orange;
    }
    li:nth-child(2){
        transform: translateZ(-100px);
        background: cyan;
    }
    li:nth-child(3){
        transform:rotateX(90deg) translateZ(100px);
        background: yellow;
    }
    li:nth-child(4){
        transform:rotateX(90deg) translateZ(-100px);
        background: blue;
    }
    li:nth-child(5){
        transform: rotateY(90deg) translateZ(100px);
        background: green;
    }
    li:nth-child(6){
        transform: rotateY(90deg) translateZ(-100px);
        background: pink;
    }
    /* 动画的声明 */
    @-webkit-keyframes donghua{
        from{
            transform: rotateX(0deg) rotateY(0deg);
        }
        to{
            transform: rotateX(360deg) rotateY(360deg);
        }
    }
    ul:hover{
        animation-play-state:paused;
    }
</style>

　　

 

posted @   Viper7  阅读(67)  评论(0)  编辑  收藏  举报
相关博文：
·  H5_Day2
·  H5_Day1
·  HTML5+CSS3-02
·  HTML5CSS3基础
·  H5C3部分
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配，妙~啊~
点击右上角即可分享
微信分享提示
SQL AI 助手