首页 > 代码库 > CSS3 实现正方体

CSS3 实现正方体

2024-08-24 03:51:07   218人阅读

技术分享
最终效果


demo

代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>立方体</title>
    <style>
        *{margin: 0;padding: 0;}

        .stage{position: relative;margin: 300px 0 0 300px;perspective: 800px;width: 200px;height: 200px;}
        .container{width: 200px;height: 200px;position: absolute;transform-style:preserve-3d;transition: all 3s;}
        .face{width: 100%;height: 100%;position: absolute;left: 0;top: 0;text-align: center;line-height: 200px;font-size: 50px;color: #fff;border: 1px solid #ccc;opacity: 0.3;background: #999;}
        .f1{transform: rotateX(90deg) translateZ(100px);}
        .f2{transform: translateZ(-100px);}
        .f3{transform: rotateX(90deg) translateZ(-100px);}
        .f4{transform: translateZ(100px);}
        .f5{transform: rotateY(90deg) translateZ(100px);}
        .f6{transform: rotateY(90deg) translateZ(-100px);}

    </style>
</head>
<body>
    <button>旋转</button>
    <div>
        <div>
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
        </div>
    </div>

    <script>
        var btn = document.getElementById(‘rot‘);
        var cont = document.getElementById(‘cont‘);
        btn.addEventListener(‘click‘,function(){
            cont.style.transform = ‘rotateY(180deg)‘;
        },false);

    </script>

</body>
</html>

首先我们需要一个舞台stage,方便我们设置perspective(透视值)
然后我们还需要一个container做旋转的容器，在container上面我们需要设置transfor-style，方便container下面的子元素转换成3d元素。
接着我们就可以开始给face安排位置

贴一张坐标图方便理解

技术分享
坐标图

CSS3 实现正方体


联系
我们