前端通过3d实现一个立体正方体

努力全栈的小鹿

已于 2023-03-20 18:50:46 修改

阅读量737

点赞数 4

文章标签：前端 3d css css3 html

于 2023-03-19 11:50:15 首次发布

本文链接：https://blog.csdn.net/luhanglh/article/details/129648328

版权

我们来先看看实现的效果

3d 实现正方体

首先要设置正方体的6个面(我是用的ui-li 大家可以尝试用div)

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

接着可以设置样式，其中要涉及到3d沿着z轴位移，需要看到效果就必须开启3d模式，在父元素上添加

    transform-style: preserve-3d;

接着给6个li标签分别设置颜色(设置成透明的颜色为了方便观察各个面更好体验3d效果)

这里同时设置位移和旋转

设置translateZ(100px)的目的是为了在网页上更好的显示3d效果

rotate属性是设置旋转X是沿着x轴旋转Y则是沿着y轴旋转(至于为什么要设置那么几个度数大家可以思考)

注意：旋转后面是有单位的！！！！deg (表示度数)

li:nth-child(1) {
    background-color: rgba(250, 21, 9, 0.4);
    /* 开始位移和旋转下面的每一个li都是这样的操作 */
    transform: rotateX(0deg) translateZ(100px);
}

li:nth-child(2) {
    background-color: rgba(104, 65, 212, 0.881);
    transform: rotateX(90deg) translateZ(100px);

}

li:nth-child(3) {
    background-color: rgba(100, 0, 100, .4);
    transform: rotateX(180deg) translateZ(100px);

}

li:nth-child(4) {
    background-color: rgba(232, 247, 21, .4);
    transform: rotateX(270deg) translateZ(100px);

}

li:nth-child(5) {
    background-color: rgba(16, 223, 64, .4);
    transform: rotateY(90deg) translateZ(100px);

}

li:nth-child(6) {
    background-color: rgba(229, 128, 12, .4);
    transform: rotateY(-90deg) translateZ(100px);
}

因为li标签默认是块级元素，所以不会在一行显示，我们需要将块级元素转换为行内块元素。

转换行内块元素的方法有很多:

1.给父元素设置display属性

display: inline-block;

2.设置浮动(脱离标准文档流)

float: left;

3.通过子绝父相(子元素脱离标准文档流)

/*父元素相对定位*/
position: relative;
/*子元素绝对定位*/
position: absolute;

我们的代码是通过第三种方式

ul {
    
    width: 200px;
    height: 200px;
    margin: 200px auto;
    position: relative;
    list-style: none;
    /* 开启3d模式 */
    transform-style: preserve-3d;
    /* 设置过度时间 */
    transition: 3s;
}

li {
    position: absolute;
    width: 200px;
    height: 200px;
}

最后完整的css代码如下：

* {
    margin: 0;
    padding: 0;
}

ul {
    
    width: 200px;
    height: 200px;
    margin: 200px auto;
    position: relative;
    list-style: none;
    /* 开启3d模式 */
    transform-style: preserve-3d;
    /* 设置过度时间 */
    transition: 3s;
}

li {
    position: absolute;
    width: 200px;
    height: 200px;
}

li:nth-child(1) {
    background-color: rgba(250, 21, 9, 0.4);
    /* 开始位移和旋转下面的每一个li都是这样的操作 */
    transform: rotateX(0deg) translateZ(100px);
}

li:nth-child(2) {
    background-color: rgba(104, 65, 212, 0.881);
    transform: rotateX(90deg) translateZ(100px);

}

li:nth-child(3) {
    background-color: rgba(100, 0, 100, .4);
    transform: rotateX(180deg) translateZ(100px);

}

li:nth-child(4) {
    background-color: rgba(232, 247, 21, .4);
    transform: rotateX(270deg) translateZ(100px);

}

li:nth-child(5) {
    background-color: rgba(16, 223, 64, .4);
    transform: rotateY(90deg) translateZ(100px);

}

li:nth-child(6) {
    background-color: rgba(229, 128, 12, .4);
    transform: rotateY(-90deg) translateZ(100px);
}

/* 设置浮动 */
/* 为了观看3d效果 */
ul:hover {
    transform: rotateY(150deg) rotateX(150deg);
}