文本末隐藏、2D、3D

最新推荐文章于 2024-05-05 07:41:03 发布

伯思

最新推荐文章于 2024-05-05 07:41:03 发布

阅读量116

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/hbl020305/article/details/125939546

版权

一、文本末隐藏

文本末隐藏成为三个小点点，大致需要三步

第一步：把文本设置为不换行

white-space:nowrap

第二步：将溢出文本进行隐藏

overflow:hidden;

第三步：改为省略号

text-overflow:ellipsis

我们还可以控制显示的行数

二、2D

2d功能函数：2d的位移， 2d的旋转，2d的倾斜，2d的缩放
2d的位移：transform：translate（x，y）；
transform：translateX（x轴移动的距离）
transform：translateY（y轴移动的距离）
2D的缩放： transform:scale(x,y);
x ， y 这两个参数为一个数字，大于1放大小于1缩小
transform:scaleX();
transform:scaleY();
2d的旋转：transform：rotate（30deg）；
transform：rotateX（30deg）；
transform：rotateY（30deg）；
2d的倾斜：transform：skew（度数）；
指定x，y的倾斜
transform：skewX（度数）
transform：skewY（度数）
改变变形原点：
transform-origin：x y；属性值：left top / center
缩放和旋转对位移的影响：
多个功能函数共同使用的情况下，尽量先写位移后写其他的功能函数。

我们还可以用一个组合函数：

案例：


<!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 type="text/css">
        .box {
            width: 300px;
            height: 300px;
            position: absolute;
            top: 300px;
            left: 300px;
            /* background-color: aqua; */
            border-radius: 50%;
        }
        
        .box>div {
            width: 40px;
            height: 40px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 0;
            /* transform: translate(-50%, -50%); */
            transform: scale(0);
            transition: all 1s;
            transform-origin: 150px 150px;
            z-index: -1;
        }
        
        .box::after {
            content: '';
            width: 150px;
            height: 150px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        .box:hover div:nth-child(1) {
            transform: scale(1) rotate(40deg);
        }
        
        .box:hover div:nth-child(2) {
            transform: scale(1) rotate(80deg);
        }
        
        .box:hover div:nth-child(3) {
            transform: scale(1) rotate(120deg);
        }
        
        .box:hover div:nth-child(4) {
            transform: scale(1) rotate(160deg);
        }
        
        .box:hover div:nth-child(5) {
            transform: scale(1) rotate(200deg);
        }
        
        .box:hover div:nth-child(6) {
            transform: scale(1) rotate(240deg);
        }
        
        .box:hover div:nth-child(7) {
            transform: scale(1) rotate(280deg);
        }
        
        .box:hover div:nth-child(8) {
            transform: scale(1) rotate(320deg);
        }
        
        .box:hover div:nth-child(9) {
            transform: scale(1) rotate(360deg);
        }
    </style>
</head>

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

</html>

效果图：

三、3D

3D的一些属性值：
none   定义不进行转换
matrix(n,n,n,n,n,n)   定义 2D 转换，使用六个值的矩阵
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)   定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate(x,y)   定义 2D 移动 transform:translate(20px,30px)是将元素移动到横坐标20px，纵坐标30px的地方
translate3d(x,y,z)   定义 3D 移动。
translateX(x)   定义移动，只移动 X 轴
translateY(y)   定义移动，只移动 Y 轴
translateZ(z)   定义 3D 移动，只移动 Z轴
scale(x,y)   定义 2D 缩放，1是默认值，大于1是放大，小于1是缩小
scale3d(x,y,z)   定义 3D 缩放，1是默认值，大于1是放大，小于1是缩小
scaleX(x)   通过设置 X 轴的值来定义缩放 transform:scaleX(.5)将x轴向中点缩放一半
scaleY(y)   通过设置 Y 轴的值来定义缩放transform:scaleY(.5)将y轴向中点缩放一半
scaleZ(z)   通过设置 Z 轴的值来定义 3D 缩放。
rotate(angle)   定义 2D 旋转，在参数中规定角度
rotate3d(x,y,z,angle)   定义 3D 旋转。
rotateX(angle)   以x轴为轴心，往x轴反方向看是顺时针旋转
rotateY(angle)   以y轴为轴心，往y轴反方向看是逆时针旋转
rotateZ(angle)   以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>Document</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        html {
            width: 100%;
            height: 100%;
        }
        
        body {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .box {
            width: 150px;
            height: 150px;
            position: relative;
            animation: mofang 4s linear infinite;
            transform-style: preserve-3d;
        }
        
        .box div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #fff;
        }
        
        .box div:nth-child(1) {
            transform: translateZ(75px);
        }
        
        .box div:nth-child(2) {
            transform: rotateY(-90deg) translateZ(75px);
        }
        
        .box div:nth-child(3) {
            transform: rotateY(180deg) translateZ(75px);
        }
        
        .box div:nth-child(4) {
            transform: rotateY(90deg) translateZ(75px);
        }
        
        .box div:nth-child(5) {
            transform: rotateX(90deg) translateZ(75px);
        }
        
        .box div:nth-child(6) {
            transform: rotateX(-90deg) translateZ(75px);
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        @keyframes mofang {
            from {
                transform: rotateX(0) rotateY(0);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div><img src="img/11.jpg" alt=""></div>
        <div><img src="img/12.jpg" alt=""></div>
        <div><img src="img/13.jpg" alt=""></div>
        <div><img src="img/14.jpg" alt=""></div>
        <div><img src="img/15.jpg" alt=""></div>
        <div><img src="img/16.jpg" alt=""></div>
    </div>
</body>

</html>

效果图：