纯CSS实现3D立方体效果

html 专栏收录该内容
1 篇文章 0 订阅
<style>
        .c{
            position: fixed;
            top: 200px;
            left: 200px;
            width: 300px;
            height: 300px;
            transform: perspective(1000px);
            transform-style: preserve-3d;
            /* border: 5px solid green; */
            animation: zhuan 6s linear infinite;
        }
        @keyframes zhuan{
            from{
                transform: rotateX(0) rotateY(0);
            }
            to{
                transform: rotateX(360deg) rotateY(360deg)
            }
        }
        .a{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 25px;
            background-color: red;
            transform: translateZ(100px);
        }
        .b{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 25px;
            background-color: green;
            transform: translateX(100px) rotateY(90deg);
        }
        .d{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 25px;
            background-color: black;
            transform: translateX(-100px) rotateY(90deg);
        }
        .e{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 25px;
            background-color: purple;
            transform: translateZ(-100px);
        }
        .f{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 25px;
            background-color: gray;
            transform: translateY(-100px) rotateX(90deg);
        }
        .g{
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 25px;
            background-color: yellow;
            transform: translateY(100px) rotateX(90deg);
        }
    </style>
    <div class="c">
        <div class="a">正面</div>
        <div class="b">右面</div>
        <div class="d">左面</div>
        <div class="e">背面</div>
        <div class="f">顶面</div>
        <div class="g">底面</div>
    </div>

注意:要实现3D效果首先必须设置transform-style: preserve-3d;并且设置视距,视距就和在笔直的公路上看一辆远处的车一样,车子越近看到的就越大,车越远看到越小。同理视距越远目标就越小,视距越近目标越大。
在父元素设置完3D视距之后剩余的就是对子元素的合并达到3D立方体的效果。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值