2D/3D转换

忘川之鱼

已于 2022-07-23 16:44:22 修改

阅读量78

点赞数

文章标签： javascript css html

于 2022-07-22 21:28:44 首次发布

本文链接：https://blog.csdn.net/m0_68618659/article/details/125940037

版权

1 文本阴影：

css3中，text-shadow`属性适用于文本阴影。

实例: text-shadow : 5px 5px 5px#FF0000;

效果：

2. 盒子阴影:

csS3中CSS3 box-shadow属性适用于盒子阴影。

3.css3文本溢出属性指定应向用户如何显示移除的内容：

<!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">

        .div-1 {

            width: 800px;

            height: 533px;

            background-image: url(img/1.jpg);

            margin: 0 auto;

            position: relative;

        }

       

        .div-1::before {

            content: '';

            position: absolute;

            width: 600px;

            height: 20px;

            background-color: black;

            filter: blur(20px);

            top: 100%;

            left: 50%;

            transform: translate(-50%);

        }

       

        p {

            width: 400px;

            height: 400px;

            border: 1px solid red;

            /* 设置成不换行 */

            white-space: nowrap;

            /* 将溢出文本进行隐藏 */

            overflow: hidden;

            /* 改成省略号 */

            text-overflow: ellipsis;

        }

    </style>

</head>

<body>

    <!-- <div class="div-1"></div> -->

    <p>而奋斗刮大风访刮大风访问隔热条给你发股份他哥哥爱国和人工麝香巴尔干热风粉底人

        工麝刮大风访问隔热条给你发股份他哥哥爱国和人工麝香巴尔干热风粉底人工麝问隔热

        条给你发股份他哥哥爱国和人工麝香巴尔干热风粉底人工麝香

    </p>

</body>

</html>

4. translate()方法：

translate()方法从其当前位置移动元素(根据为X轴和Y轴指定的参数)

<!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">

        .btn {

            width: 300px;

            height: 300px;

            /* background-color: red; */

            border-radius: 50%;

            position: absolute;

            left: 300px;

            top: 300px;

        }

        .btn::after {

            content: "css";

            width: 200px;

            height: 200px;

            background-color: red;

            position: absolute;

            top: 50%;

            left: 50px;

            transform: translate(0, -50%);

            border-radius: 50%;

            text-align: center;

            line-height: 200px;

            font-size: 70px;

            color: white;

        }

        .btn div {

            width: 40px;

            height: 40px;

            background-color: red;

            border-radius: 50%;

            position: absolute;

            top: 0;

            left: 0;

            transition: 1s;

            transform-origin: 150px 150px;

            transform: scale(0);

        }

        .btn:hover div:nth-child(1) {

            transform: scale(1) rotate(45deg);

        }

        .btn:hover div:nth-child(2) {

            transform: scale(1) rotate(90deg);

        }

        .btn:hover div:nth-child(3) {

            transform: scale(1) rotate(135deg);

        }

        .btn:hover div:nth-child(4) {

            transform: scale(1) rotate(180deg);

        }

        .btn:hover div:nth-child(5) {

            transform: scale(1) rotate(0deg);

        }

        .btn:hover div:nth-child(6) {

            transform: scale(1) rotate(-45deg);

        }

        .btn:hover div:nth-child(7) {

            transform: scale(1) rotate(-90deg);

        }

        .btn:hover div:nth-child(8) {

            transform: scale(1) rotate(-135deg);

        }

    </style>

</head>

<body>

    <div class="btn">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></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>Document</title>

    <style type="text/css">

        .div-0 {

            width: 600px;

            height: 600px;

            border: 2px solid black;

            margin: 0 auto;

        }

        .div-1 {

            width: 200px;

            height: 200px;

            background-color: blue;

            transform: rotateX(180deg);

            /* transform: perspective(900px) translateX(100px) skewX(40deg); */

        }

    </style>

</head>

<body>

    <div class="div-0">

        <div class="div-1">这是第一个盒子</div>

    </div>

</body>

</html>