css3立方体的实现

css3立方体实现思路:立方体六个面 通过ul、li来创建每个面。通过浮动把六个面叠在一起,在通过旋转平移每个面便可实现立方体。六个面中前面要沿着Z轴平移宽度的一半,后面要沿着Z轴平移宽度的一半,但方向相反为负的宽度的一半。左面需要先沿着Y轴旋转90度,在平移宽度的一半。右面需要先沿着Y轴旋转-90度,在平移宽度的一半。上面需要先沿着X轴旋转90度,在平移宽度的一半。下面需要先沿着X轴旋转-90度,在平移宽度的一半。这样六给面就设置完成了。最后通过总容器的旋转来看出立方体的效果。


HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<!--创建总容器-->
<div class="container"></div>

<script src="app.js"></script>
</body>
</html>

CSS代码:

*{
    margin: 0;
    padding:0;
}
/*创建rotate动画*/
@keyframes rotate {
    from{
        transform: rotateX(0deg) rotateY(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
    }
}

js代码:

// 创建嵌套立方体
(function () {
    // 创建立方体的函数 需要传类名和宽度
    function cube(className,maxWidth) {
        // 判断类名为out-cube宽度为传进来的宽度,类名为其他则是1/2的宽度
        var width = className==="out-cube"?maxWidth:maxWidth/2;
        // 创建一个容器
        var bg = document.createElement("div");
        // 设置其样式 并设为绝对定位
        bg.style.cssText = "width: "+width+"px;height: "+width+"px;position: absolute;";
        // 创建一个ul 放进bg        var ul = document.createElement("ul");
        bg.appendChild(ul);
        // 设置ul的样式 并设为相对定位 transform-style: preserve-3d(表示所有子元素在3D空间中呈现);
        ul.style.cssText = "width: "+width+"px;height: "+width+"px;list-style: none;position: relative;transform-style: preserve-3d;";
        // 设置ul的类名为传进来的类名
        ul.setAttribute("class",className);
        // 创建一个样式数组 为创建正方体做准备
        var styles = ["background-color: #0970ff;transform: translateZ("+width/2+"px);","background-color: #bb5eff;transform: translateZ("+-width/2+"px);","background-color: #b9ffae;transform: rotateY(-90deg) translateZ("+width/2+"px);","background-color: #ffdf38;transform: rotateY(90deg) translateZ("+width/2+"px);","background-color: #61ff4d;transform: rotateX(-90deg) translateZ("+width/2+"px);","background-color: #ff328a;transform: rotateX(90deg) translateZ("+width/2+"px);"];
        // 通过for循环创建立方体的每个面 并把每个面的样式添加进去
        for (var i=0;i<styles.length;i++){
            var li = document.createElement("li");

            // 给每个li设置宽高和绝对定位 以及透明度 方便看见里面的小立方体
            var css = styles[i]+"opacity: 0.4;width: "+width+"px;height: "+width+"px;position: absolute;";
            // 如果类名为in-cube的样式加入left: 50%;top: 50%;
            css+=className==="in-cube"?"left: 50%;top: 50%;":"";
            li.style.cssText = css;
            // 把每个li放进ul            ul.appendChild(li);
        }
        // 放回bg容器
        return bg;
    }

    // 创建嵌套立方体的方法 传一个宽度
    function doubleCub(width) {

        // 写一个总容器
        var container = document.createElement("div");
        // 设置其样式 并执行名字为rotate的动画
        container.style.cssText = "width: "+width+"px;height: "+width+"px;margin: 200px auto;transform-style: preserve-3d;animation: rotate 5s linear 0s infinite;";
        // 放入两个立方体
        container.appendChild(cube("out-cube",width));
        container.appendChild(cube("in-cube",width));
        // 放回总容器
        return container;
    }
    // 初始化函数
    function init() {

        // 把总容器放入页面中
        document.body.appendChild(doubleCub(300));
    }
    
    init();
    
})();

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值