3D立体（案例）

橘子海326

已于 2024-10-23 11:29:41 修改

阅读量354

点赞数 10

分类专栏： css 文章标签： 3d css css3 html5 chrome visual studio code

于 2024-10-18 11:10:36 首次发布

本文链接：https://blog.csdn.net/2402_86247394/article/details/143016383

版权

css 专栏收录该内容

4 篇文章

订阅专栏

一定要想明白是怎么绕X Y Z轴旋转，脑子里要有画面，要得到下面图片效果，要知道每一个面是垂直于哪个轴，怎么倾斜移动，旋转，有一个清晰的思路才能做出来。自己先做一下一点一点给出框架，先给出6个盒子再去摆放位置。

效果图：

整体代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .d1{width: 800px;
            height: 800px;
            display: flex;
            flex-wrap: wrap;
            border: 1px solid black;}
        .container{
            width: 200px;
            height: 200px;
            margin: 100px 0 0 100px;
        
        }
        .cube{
            /* width: 200px; */
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            backface-visibility: visible;
            perspective-origin: 100% 100%;

        }
        .cube1{ width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            backface-visibility: visible;
            perspective-origin: 150% 150%;}
        .cube2{width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            backface-visibility: visible;
            perspective-origin: 200% 200%;}
        .cube3{width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            backface-visibility: visible;
            perspective-origin: 300% 300%;}
        .perspective250{
            perspective: 550px;
            
        }
        .face{
            position: absolute;
            font-size: 60px;
            width: 100px;
            height: 100px;
            background-color: rgb(35, 35, 25);
            margin-top: 10px;
            line-height: 100px;
            text-align: center;
            color: aliceblue;
        }
        .front{
            background: rgba(5,7, 8, 0.3);
            transform: translateZ(50px);
        }
        .back{
            background: rgba(58, 147, 90, 0.7);
            transform:rotateY(180deg) translateZ(50px) ;
        }
        .right{
            background:rgba(194, 30, 30, 0.6) ;
            transform: rotateY(90deg) translateZ(50px);
        }
        .left{
            background: rgba(39, 24, 141, 0.6);
            transform: rotateY(-90deg) translateZ(50px);
        }

        .top{
         background-color: rgba(178, 194, 30, 0.6);
         transform: rotateX(-90deg) translateZ(50px);   
        }
        .bottom{
            background-color: rgba(194, 30, 145, 0.6);
            transform: rotateX(90deg) translateZ(50px);   
        }

       
    </style>
</head>
<body>
    <div class="d1">
        <div class="container">
            <div class="cube perspective250">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
            </div>
        </div>
        <div class="container">
            <div class="cube1 perspective250">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
            </div>
        </div>
        <div class="container">
            <div class="cube2 perspective250">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
            </div>
        </div>
        <div class="container">
            <div class="cube3 perspective250">
                <div class="face front">1</div>
                <div class="face back">2</div>
                <div class="face right">3</div>
                <div class="face left">4</div>
                <div class="face top">5</div>
                <div class="face bottom">6</div>
            </div>
        </div>
    </div>
   

</body>
</html>

解析：

首先，使用通配选择器*清除了所有元素的内边距和外边距。这样操作显得专业
定义了一个类.d1，作为容器，设置了宽度、高度、弹性布局和边框。
类.container用于包裹每个 3D 盒子，设置了宽度、高度和外边距。
类.cube、.cube1、.cube2、.cube3用于创建 3D 盒子，设置了transform-style为preserve-3d以保持 3D 效果，backface-visibility为visible以显示背面，perspective-origin指定透视点。
类.perspective250设置了透视值。
各个面的类通过绝对定位、设置背景颜色、字体大小等属性来定义每个面的样式
每个面使用绝对定位，并通过不同的transform属性来确定其在 3D 空间中的位置。
也可以添加响应式布局，在不同页面展示效果更好

结束

学到东西、