【HTML+CSS】实现快速3D效果，六个案例源码分享，有效果图。3D球体、正方体+鼠标渐入渐出效果、贴图正方体、球体相册、行星环绕相册。附源码压缩包，下载即用

已于 2024-07-19 15:33:24 修改
阅读量2.1k 收藏 22
点赞数 33
文章标签： html css 3d 前端 javascript 贴图 windows
于 2024-07-15 16:36:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fyh559/article/details/140441395
版权

场景描述

整理资料发现在开始学习HTML时，写了几个具有3D效果的页面，虽然简单，与其吃灰，那就把源码分享一下吧，不如做个记录也好。

效果图 + 源码

（1）、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>
        * {
            margin: 0;
            padding: 0;
        }

        .contain {
            margin: 100px auto;
            width: 800px;
            height: 600px;
            /* background: skyblue; */
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
            transform: rotateX(-30deg);
        }

        .contain>div {
            width: 200px;
            height: 200px;
            /* perspective: 1000px; */
            /* border: 1px solid black; */
            transform-style: preserve-3d;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* transition: 2s; */
            animation: run 2s linear infinite;
        }

        @keyframes run {
            from {}

            to {
                /* transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); */
                /* transform: rotateX(360deg) rotateY(360deg); */
                transform: rotateY(360deg);
                transform: rotate3d(1, 1, 1, 360deg);
                /* transform: rotate3d(360deg, 360deg, 360deg); */
            }
        }

        /* .contain:hover>div {} */

        .box {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border-radius: 100px;
        }

        .bg1 {
            background: rgb(53, 63, 19);
            transform: rotateY(60deg);
        }

        .bg2 {
            background: rgb(31, 149, 173);
            transform: rotateY(120deg);
        }

        .bg3 {
            background: rgb(248, 90, 198);
            transform: rotateY(180deg);
        }

        .bg4 {
            background: rgb(212, 217, 175);
            transform: rotateY(-120deg);
        }

        .bg5 {
            background: rgb(233, 133, 133);
            transform: rotateY(-60deg);
        }

        .bg6 {
            background: rgb(172, 224, 49);
            transform: rotateY(0deg);
        }
    </style>
</head>

<body>
    <div class="contain">
        <div>
            <div class="box bg1"></div>
            <div class="box bg2"></div>
            <div class="box bg3"></div>
            <div class="box bg4"></div>
            <div class="box bg5"></div>
            <div class="box bg6"></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>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: black;
        }

        .contain {
            margin: 100px auto;
            width: 800px;
            height: 600px;
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
            /* transform: rotateX(-30deg) rotateY(-30deg); */
        }

        .contain>div {
            width: 200px;
            height: 200px;
            transform-style: preserve-3d;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* transition: 2s; */
            animation: run 4s linear infinite;
        }

        @keyframes run {
            0% {}

            /* 50% {
                transform: rotate3d(1, 1, 1, 360deg) rotateX(360deg) rotateZ(360deg);
                transform: rotate3d(1, 1, 1, 360deg);
            } */

            100% {
                /* transform: rotate3d(1, 1, 1, 360deg) rotateX(360deg) rotateZ(360deg); */
                /* transform: rotate3d(-1, -1, -1, -360deg); */
                transform: rotate3d(1, -1, 1, 360deg);
            }
        }

        .contain:hover>div {
            animation-play-state: paused;
        }

        .box {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            line-height: 200px;
            border-radius: 30px;
        }

        .box>h1 {
            font-size: 160px;
            opacity: .8;
            color: white;
        }

        .bg1 {
            background: rgba(53, 63, 19, .6);
            transform: rotateX(-90deg) translateZ(100px);
        }

        .bg2 {
            background: rgba(31, 149, 173, .6);
            transform: rotateX(90deg) translateZ(100px);
        }

        .bg3 {
            background: rgba(248, 90, 198, .6);
            transform: rotateY(270deg) translateZ(100px);
        }

        .bg4 {
            background: rgba(212, 217, 175, .6);
            transform: rotateY(180deg) translateZ(100px);
        }

        .bg5 {
            background: rgba(233, 133, 133, .6);
            transform: rotateY(90deg) translateZ(100px);
        }

        .bg6 {
            background: rgba(172, 224, 49, .6);
            transform: rotateY(0deg) translateZ(100px);
        }
    </style>
</head>

<body>
    <div class="contain">
        <div>
            <div class="box bg1">
                <h1>1</h1>
            </div>
            <div class="box bg2">
                <h1>2</h1>
            </div>
            <div class="box bg3">
                <h1>3</h1>
            </div>
            <div class="box bg4">
                <h1>4</h1>
            </div>
            <div class="box bg5">
                <h1>5</h1>
            </div>
            <div class="box bg6">
                <h1>6</h1>
            </div>
        </div>

    </div>
</body>

</html>

（3）、贴图正方体 + 鼠标渐入渐出效果

在这里插入图片描述

源码如下：

<!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;
        }

        .contain {
            margin: 100px auto;
            width: 800px;
            height: 600px;
            position: relative;
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .contain>div {
            width: 400px;
            height: 400px;
            /* perspective: 1200px; */
            transform-style: preserve-3d;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            /* transition: 2s; */
            animation: run 6s linear infinite;
        }

        @keyframes run {
            from {}

            to {
                /* transform: rotateY(720deg) rotateX(720deg) rotateZ(720deg); */
                transform: rotateY(720deg) rotateX(720deg);
                /* transform: rotateY(720deg); */
                /* transform: rotate3d(1, 1, 1, 360deg); */
            }
        }

        .contain:hover>div {
            animation-play-state: paused;
        }

        .box {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            /* line-height: 400px; */
        }

        .box>img {
            width: inherit;
            height: inherit;
        }

        .bg1 {
            background: rgba(53, 63, 19, .6);
            transform: rotateX(-90deg) translateZ(200px);
        }

        .bg2 {
            background: rgba(31, 149, 173, .6);
            transform: rotateX(90deg) translateZ(200px);
        }

        .bg3 {
            background: rgba(248, 90, 198, .6);
            transform: rotateY(270deg) translateZ(200px);
        }

        .bg4 {
            background: rgba(212, 217, 175, .6);
            transform: rotateY(180deg) translateZ(200px);
        }

        .bg5 {
            background: rgba(233, 133, 133, .6);
            transform: rotateY(90deg) translateZ(200px);
        }

        .bg6 {
            background: rgba(172, 224, 49, .6);
            transform: rotateY(0deg) translateZ(200px);
        }
    </style>
</head>

<body>
    <div class="contain">
        <div>
            <div class="box bg1">
                <img src="./images/am1.gif" alt="">
            </div>
            <div class="box bg2">
                <img src="./images/am2.gif" alt="">
            </div>
            <div class="box bg3">
                <img src="./images/am3.gif" alt="">
            </div>
            <div class="box bg4">
                <img src="./images/am4.gif" alt="">
            </div>
            <div class="box bg5">
                <img src="./images/am5.gif" alt="">
            </div>
            <div class="box bg6">
                <img src="./images/am6.gif" alt="">
            </div>
        </div>

    </div>
</body>

</html>

（4）、夜光球体

在这里插入图片描述

源码如下：

<!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;
        }

        body {
            background: black;
        }

        .contain {
            margin: 100px auto;
            width: 800px;
            height: 600px;
            /* background: skyblue; */
            perspective: 1000px;
            transform-style: preserve-3d;
        }

        .contain>div {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border: 1px solid black;
            transform-style: preserve-3d;
            /* transform: rotateX(30deg); */
            /* transition: 2s; */
            animation: run 4s linear infinite;
        }

        @keyframes run {
            0% {}

            100% {
                transform: rotate3d(1, 1, 1, 360deg);
            }
        }

        .box1 {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .box2 {
            width: 150px;
            height: 150px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

        .bg1 {
            /* border: 1px solid red; */
            border-radius: 100px;
            box-shadow: 0px 0px 100px red;
        }

        .bg2 {
            /* border: 1px solid red; */
            border-radius: 100px;
            box-shadow: 0px 0px 100px red;
        }

        .contain>div>div:nth-child(2) {
            transform: translateZ(50px);
        }

        .contain>div>div:nth-child(3) {
            transform: translateZ(-50px);
        }

        .contain>div>div:nth-child(4) {
            transform: rotateX(90deg);
        }

        .contain>div>div:nth-child(5) {
            transform: translateY(-50px) rotateX(90deg);
        }

        .contain>div>div:nth-child(6) {
            transform: translateY(50px) rotateX(90deg);
        }

        .contain>div>div:nth-child(7) {
            transform: translateX(-50px) rotateY(90deg);

        }

        .contain>div>div:nth-child(8) {
            transform: translateX(50px) rotateY(90deg);
        }
    </style>
</head>

<body>
    <div class="contain">
        <div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
        </div>
    </div>
</body>

</html>

（5）、球体相册

在这里插入图片描述

源码如下：

<!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>
    <link rel="stylesheet" href="./css/05.css">
</head>

<body>
    <div class="contain">
        <div>
            <!-- 球体部分 -->
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>

            <!-- 相册部分 -->
            <div class="box3"><img src="./images/am1.gif" alt=""></div>
            <div class="box3"><img src="./images/am2.gif" alt=""></div>
            <div class="box3"><img src="./images/am3.gif" alt=""></div>
            <div class="box3"><img src="./images/am4.gif" alt=""></div>
            <div class="box3"><img src="./images/am5.gif" alt=""></div>
            <div class="box3"><img src="./images/am6.gif" alt=""></div>

        </div>
    </div>
</body>

</html>
  • 以下是css源码
* {
    margin: 0;
    padding: 0;
}

body {
    background: black;
}

.contain {
    margin: 100px auto;
    width: 800px;
    height: 600px;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.contain>div {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    transform-style: preserve-3d;
    animation: run 4s linear infinite;
}

@keyframes run {
    0% {}

    100% {
        transform: rotate3d(1, 1, -1, 360deg);
    }
}

.box1 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.box2 {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.box3 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 10px solid #ccc;
    box-shadow: 0px 0px 60px white;
    opacity: .8;
}

.box3>img {
    width: inherit;
    height: inherit;
}

.bg1 {
    border-radius: 100px;
    box-shadow: 0px 0px 100px red;
}

.bg2 {
    border-radius: 100px;
    box-shadow: 0px 0px 100px red;
}

.contain>div>div:nth-child(2) {
    transform: translateZ(50px);
}

.contain>div>div:nth-child(3) {
    transform: translateZ(-50px);
}

.contain>div>div:nth-child(4) {
    transform: rotateX(90deg);
}

.contain>div>div:nth-child(5) {
    transform: translateY(-50px) rotateX(90deg);
}

.contain>div>div:nth-child(6) {
    transform: translateY(50px) rotateX(90deg);
}

.contain>div>div:nth-child(7) {
    transform: translateX(-50px) rotateY(90deg);

}

.contain>div>div:nth-child(8) {
    transform: translateX(50px) rotateY(90deg);
}

.contain>div>div:nth-child(9) {
    transform: translateZ(200px);
}

.contain>div>div:nth-child(10) {
    transform: translateZ(-200px) rotateX(180deg);
}

.contain>div>div:nth-child(11) {
    transform: translateX(200px) rotateY(90deg);
}

.contain>div>div:nth-child(12) {
    transform: translateX(-200px) rotateY(90deg);
}

.contain>div>div:nth-child(13) {
    transform: rotateX(90deg) translateZ(200px);
}

.contain>div>div:nth-child(14) {
    transform: rotateX(90deg) translateZ(-200px);
}

（6）、行星环绕相册

在这里插入图片描述

源码如下：

<!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>
    <link rel="stylesheet" href="./css/06.css">
</head>

<body>
    <div class="contain">
        <div>
            <div class="box"><img src="./images/01-a.png" alt=""></div>
            <div class="box"><img src="./images/02-a.png" alt=""></div>
            <div class="box"><img src="./images/03-a.png" alt=""></div>
            <div class="box"><img src="./images/04-a.png" alt=""></div>
            <div class="box"><img src="./images/05-a.png" alt=""></div>
            <div class="box"><img src="./images/06-a.png" alt=""></div>
            <div class="box"><img src="./images/07-a.png" alt=""></div>
            <div class="box"><img src="./images/08-a.png" alt=""></div>
            <div class="box"><img src="./images/06-a.png" alt=""></div>
            <div class="box"><img src="./images/05-a.png" alt=""></div>
            <div class="box"><img src="./images/03-a.png" alt=""></div>
            <div class="box"><img src="./images/12-a.png" alt=""></div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box1 bg1"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <div class="box2 bg2"></div>
            <!-- <div class="box2 bg2">8</div> -->
        </div>
    </div>
</body>

</html>
  • 以下是css源码
* {
    margin: 0;
    padding: 0;
}

/* body {
    background: black;
} */

.contain {
    margin: 100px auto;
    width: 800px;
    height: 600px;
    /* background: skyblue; */
    perspective: 1000px;
    transform-style: preserve-3d;
    /* transform: rotateX(-18deg); */
    animation: rotate_contain 10s linear infinite;
    /* transform: rotate3d(1, 1, 1, -34deg); */
}

.contain>div {
    width: 400px;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    /* border: 1px solid black; */
    transform-style: preserve-3d;
    /* transform: rotateX(-18deg) rotateY(-18deg); */
    animation: run 10s linear infinite;
    /* transform: rotateY(-18deg); */
}

@keyframes run {
    0% {}

    100% {
        transform: rotate3d(0, 1, 0, 360deg);
    }
}

@keyframes rotate_contain {
    0% {
        transform: rotateX(-30deg);
    }

    50% {
        transform: rotateX(30deg);
    }

    100% {
        transform: rotateX(-30deg);
    }
}

.box {
    width: 80px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.box>img {
    width: inherit;
    height: inherit;
}

.contain>div>div:nth-child(1) {
    /* background: yellow; */
    transform: rotateY(30deg) translateZ(400px);
}

.contain>div>div:nth-child(2) {
    /* background: rgb(201, 201, 174); */
    transform: rotateY(60deg) translateZ(400px);
}

.contain>div>div:nth-child(3) {
    /* background: rgb(62, 160, 145); */
    transform: rotateY(90deg) translateZ(400px);
}

.contain>div>div:nth-child(4) {
    /* background: rgb(73, 98, 225); */
    transform: rotateY(120deg) translateZ(400px);
}

.contain>div>div:nth-child(5) {
    /* background: rgb(155, 62, 156); */
    transform: rotateY(150deg) translateZ(400px);
}

.contain>div>div:nth-child(6) {
    /* background: yellow; */
    transform: rotateY(180deg) translateZ(400px);
}

.contain>div>div:nth-child(7) {
    /* background: rgb(201, 201, 174); */
    transform: rotateY(210deg) translateZ(400px);
}

.contain>div>div:nth-child(8) {
    /* background: rgb(62, 160, 145); */
    transform: rotateY(240deg) translateZ(400px);
}

.contain>div>div:nth-child(9) {
    /* background: rgb(73, 98, 225); */
    transform: rotateY(270deg) translateZ(400px);
}

.contain>div>div:nth-child(10) {
    /* background: rgb(155, 62, 156); */
    transform: rotateY(300deg) translateZ(400px);
}

.contain>div>div:nth-child(11) {
    /* background: rgb(73, 98, 225); */
    transform: rotateY(330deg) translateZ(400px);
}

.contain>div>div:nth-child(12) {
    /* background: rgb(73, 98, 225); */
    transform: rotateY(360deg) translateZ(400px);
}

.box1 {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    font-size: 50px;
    line-height: 200px;
}

.box2 {
    width: 150px;
    height: 150px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    font-size: 50px;
    line-height: 200px;
}

.bg1 {
    /* border: 1px solid red; */
    border-radius: 100px;
    box-shadow: 0px 0px 100px rgb(52, 186, 231);
}

.bg2 {
    /* border: 1px solid red; */
    border-radius: 100px;
    box-shadow: 0px 0px 100px rgb(0, 208, 255);
}

.contain>div>div:nth-child(13) {
    transform: translateZ(0px);
    /* background: black; */
}

.contain>div>div:nth-child(14) {
    /* background: black; */
    transform: translateZ(-50px);
}

.contain>div>div:nth-child(15) {
    /* background: black; */
    transform: rotateX(90deg) translateZ(50px);
}

.contain>div>div:nth-child(16) {
    /* background: black; */
    transform: translateY(0px) rotateX(90deg);
}

.contain>div>div:nth-child(17) {
    /* background: black; */
    transform: translateY(50px) rotateX(90deg);
}

.contain>div>div:nth-child(18) {
    /* background: black; */
    transform: translateZ(50px);

}

.contain>div>div:nth-child(19) {
    /* transform: translateZ(100px) rotateY(90deg); */
    background: white;
}

描述说明

这些代码已经蛮久了，没有写注释，见谅。当然也仅仅是作为参考。鉴于有些图片不好直接上传，最后我会把所有源码包括图片等资源一起打包上传。有需要的朋友可以自行免费领取。源码链接

html的3D效果
m0_45270680的博客
07-22 845
3D效果的展现离不开阴影的设置 text-shadow: 文字的阴影 abcd a 第一个值 代表水平方向 阴影离文字的距离 正值向右 负值向左 b 第二个值 代表垂直方向 阴影离文字的距离 正值向下 负值向上 c 第三个值 代表的是文字的模糊程度 值越小 越清晰 值越大 越模糊 d 第四个值 rgba(0-255,0-255,0-255，0.0-1.0)代表文字的阴影颜色 a代表的是文字阴影的透明度 值越小 透明 值越大 越清晰。 0px -1px 0px rgb(180,180,180) 此时的光
CSS3D球体.html
08-10
css3实现球体运动，效果炫酷，需要jquery和jquery.mousewheel插件，请自行下载。
HTML 3D正方体 #炫酷特效
最新发布
nbtzt的博客
01-29 176
【HTML 3D正方体炫酷特效】，为大家设计了两个正方体同时旋转的特效，还加了开箱，希望能点赞关注收藏
html 3d效果
02-04
用html开发的3d效果，文字（图片）随着鼠标的移动360度旋转，随鼠标移动速度变化。
实现页面的3D效果
07-19 575
html: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta na...
html+3d转换动画效果图,利用HTML5+CSS3实现3D转换效果实例详解
weixin_39767983的博客
05-30 446
前言本文介绍的是css3的3d模块，对大家具有一定的参考价值，感兴趣的朋友们下面来一起看看吧。介绍首先，我们来了解一下3d的坐标系，x轴在屏幕上为水平方向，y轴为垂直方向，而z轴为垂直于屏幕的方向。不理解的话可以参考定位属性的z-index属性，那个在某种意义上就是让元素在z轴的移动。在2d转换模块中我们研究了rotateX()和rotateY()方法，就是绕x轴和y轴旋转，这其实就是3d模块的一...
【HTML】简单制作一个动态3D正方体
qq_70814008的博客
04-03 2393
无需多言，本文将详细介绍一段代码，具体内容如下：上面代码 构建了一个基于Web的3D场景，使用了Three.js库来实现。文档类型声明：通过指定了文档类型为HTML5，这是创建现代网页的基础。语言设置：在标签中，lang="en"属性设置页面内容的主要语言为英语，有助于搜索引擎优化和屏幕阅读器的正确解读。头部信息字符编码设置了页面的字符编码为UTF-8，这是一种广泛使用的国际字符编码，能够表示世界上几乎所有的字符和符号。网页标题
自定义HTML元素用于轻松展示3D模型
08-10
自定义HTML元素用于轻松展示3D模型
html3D 效果
07-29
一个非常绚丽的3D效果，值得大家参考和学习
html+css实现3D效果
不熬夜主义（？存疑）
01-11 313
4.六个图片盒子分别旋转(ratate)和偏移(translate)，拼合成一个立方体。1.使用vscode内置的代码片段快速生成基本结构。2.大盒子里面放置六个图片盒子，分别对应立方体的六个面。4.为每个图片盒子设置样式，使它们拼合成一个立方体。3.六个图片盒子里有图片，与图片盒子的大小相等。3.style标签中为盒子设置基本样式。1.最外面写一个div大盒子。2.body中编写盒子。
html实现3d视觉特效
weixin_30510153的博客
07-06 234
<html> <head> <title>HTML5实现3D球效果</title> <style type="text/css"> #box{ border:2px solid #f60; margin:0 auto; } </style> <script> ...
html实现的3D魔方
01-02
html实现的3D魔方，能够实现魔方的基本功能，可以根据需要自定义页面和功能
js 实现页面3D效果
05-10
js 实现页面3D效果
CSS3实现3D效果.html
02-24
利用HTML框架结构与CSS样式做出简易的立体效果
纯CSS3制作3D旋转球体
11-04
纯c制作3D旋转球体 纯CSS3制作3D旋转球体 纯CSS3制作3D旋转球体
2021-06-26 使用animation动画与CSS3d变形属性设置一个万花筒相册
GAARA
06-26 331
1.对每一张图片设置css的变形:旋转属性,使其形成一个闭合图形 2.设置动画,令图片的父盒子即闭合图形开始旋转
CSS3D--球体
哈喽234的博客
04-01 3447
3D球体
【HTML】简单制作一个3D动态粒子效果的时空隧道
qq_70814008的博客
04-09 1969
无需多言，本文将详细介绍一段HTML，具体内容如下：整体而言，这段代码通过Babylon.js库创建了一个具有动态粒子效果的3D场景。粒子系统生成了大量的粒子，这些粒子在场景中随机生成并随时间下落，创建出了一种动态的视觉效果，类似于一个时空隧道。通过设置相机、光源和材质，页面上呈现出一个具有深度和光照效果的3D环境。此外，通过监听窗口大小变化和渲染循环，确保了动画的流畅性和适应不同设备的显示需求。
html如何实现立体效果,CSS3实现3D立体效果
weixin_30224231的博客
06-03 2620
CSS3实现3D效果 1. 涉及到的几个CSS3属性 首先大家需要了解transform属性，主要有平移(translate),缩放(scale),拉伸(skew),旋转(rotate)。 这里涉及到3d转换的主要介绍旋转。 下面通过一组rotate效果直观理解rotateX,rotateY,rotateZ区别。 代码： .box{ width: 200px;height: 200px; back...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

博扬java张

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值