前端学习小日常第12天_前端的3d空间y方向-CSDN博客

本文链接：https://blog.csdn.net/Just_So_So_s/article/details/109752351

1.精灵图

精灵图是通过用在一个内容块插入一个精灵图片，然后通过定位来实现只显示精灵图片的一部分，这样可以大大减轻服务器的运算压力。
以下是我自己做的案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .flot {
            float: left;
        }
        
        .box-1 {
            width: 70px;
            height: 170px;
            background-image: url("/img/timg.jpg");
            background-position: -550px -257px;
        }
        
        .box-2 {
            width: 120px;
            height: 170px;
            background-image: url("/img/timg.jpg");
            background-position: -143px -463px;
        }
        
        .box-3 {
            width: 120px;
            height: 170px;
            background-image: url("/img/timg.jpg");
            background-position: -248px -660px;
        }
        
        .box-4 {
            width: 120px;
            height: 170px;
            background-image: url("/img/timg.jpg");
            background-position: -600px -72px;
        }
    </style>
</head>

<body>
    <div class="box-1 flot">
    </div>
    <div class="box-2 flot">

    </div>
    <div class="box-3 flot"></div>
    <div class="box-4 flot"></div>

</body>

</html>

在这里插入图片阿斯顿描述

2.过渡

过渡：能实现元素与元素之间的平滑过渡
元素->hover状态直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。
但是加入过渡元素之后就可很清楚的观察到中间的变换过程。
transition：过渡的属性 +完成时间（s）+ 运动曲线 +延迟时间
数值型的属性才可以设置过渡。例如：

  width,height,color,font-size

<' transition-property '>：检索或设置对象中的参与过渡的属性
<' transition-duration '>：检索或设置对象过渡的持续时间
<' transition-timing-function '>：检索或设置对象中过渡的动画类型
<’ transition-delay ‘>：检索或设置对象延迟过渡的时间
注意：如果只提供一个参数，则为 <’ transition-duration ‘> 的值定义；如果提供二个参数，则第一个为 <’ transition-duration ‘> 的值定义，第二个为 <’ transition-delay '> 的值定义
以下是我练习的例子：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            background-color: skyblue;
            transition: all 1s linear 1s;
        }
        
        .box:hover {
            width: 500px;
            background-color: slateblue;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

3.变换

变换的定义是
设置或检索对象的转换，对应的脚本特性为transform。
3.1
2D位移：transform: translate()
格式：
transform:translate(水平偏移量，垂直偏移量)
参数：
正值：向右和向下负值：反方向。
百分比。盒子本身的宽高*百分比
3.2
倾斜：transform: skew();
参数：
transform:skew(水平倾斜角度，垂直倾斜角度)
单位：deg 角度
正值：顺时针，负值：逆时针。
3.3
旋转：transform: rotate();
让盒子进行旋转
格式：
transform: rotate(角度);
单位：deg 正值为顺时针，负值为逆时针。