1P 如何使用css制作一个3D立方体

最新推荐文章于 2021-07-17 11:52:32 发布

我不是小梅子

最新推荐文章于 2021-07-17 11:52:32 发布

阅读量111

点赞数 2

分类专栏：新手文章标签： CSS HTML5

本文链接：https://blog.csdn.net/weixin_45759895/article/details/102690171

版权

新手专栏收录该内容

19 篇文章 1 订阅

订阅专栏

代码如下，所有类名可自己命名

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>3D立方体</title>
</head>
<style>
    body{
        /*perspective: ；  透视（必须加没有透视不能看到3d效果 */
        perspective: 1200px;
    }
    .box {
     /*设置每面的宽高 */
        width: 200px;
        height: 200px;
        /* position: absolute;   绝对定位 使元素脱离文档流重叠在一起方便后续使用 */
        position: absolute;
        top: 300px;
        left: 300px;
        /* opacity:  ； 给每个元素透明度 */
        opacity: 0.5;
    }

/* 具体可自己调试 */
    .red {
        /* 此面为前 */
        background-color: red;
        /* 给此一面设置背景颜色 方便看效果 */
        transform: translate3d(0px,0px,100px);
        /* transform: translate3d 使元素从2D 到 3D转换 
(0px,0px,0px)分别对应 在X轴上移动  在Y轴上移动  在Z轴上移动*/
    }

    .yellow {
        /* 此面为上 */
        background-color: yellow;
        transform: rotateX(90deg) translate3d(0px,0px,100px);
        /* rotateX（） 围绕其在一个给定度数X轴旋转的元素。 简单来说就是围绕这个3D元素的 X 轴旋转一定的度数  */
       }

    .blue {
        /* 此面为左 */
        background-color: blue;
        transform: rotateY(90deg) translate3d(0px,0px,100px);
       /* rotateY（） 围绕其在一个给定度数 Y 轴旋转的元素。 简单来说就是围绕这个3D元素的 Y 轴旋转一定的度数  */
    }

    .pink {
        /*此面为下 */
        background-color: pink;
        transform: rotateX(-90deg) translate3d(0px,0px,100px);
    }

    .green {
        /*此面为右 */
        background-color: green;
        transform: rotateY(-90deg) translate3d(0px,0px,100px);
    }

    .orange {
        /* 此面为后 */
        background-color: orange;
        transform: translate3d(0px,0px,100px);
    }
</style>

<body>
   <div class="box red">000001</div>
    <div class="box yellow">000002</div>
    <div class="box blue">000003</div>
    <div class="box pink">000004</div>
    <div class="box green">000005</div>
    <div class="box orange">000006</div>
</body>

</html>

我不是小梅子

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1P 如何使用css制作一个3D立方体

代码如下，所有类名可自己命名<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...
复制链接

扫一扫