3D属性实训-正方体展开与三阶魔方的转动

本文链接：https://blog.youkuaiyun.com/weixin_53598426/article/details/139262823

1.正方体的展开

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>正方体打开</title>
    <style>
        /* 舞台元素 */
        .big-box{
     
           width: 300px;
           height: 300px;
           /* border: 2px solid #000; */
           margin: 200px auto;
           transform-style: preserve-3d; 
           transform: rotateX(-30deg) rotateY(40deg);
           position: relative;
        }
        .big-box div{
     
            width: 300px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }
        /* 小舞台元素 */
        .temp-box{
     
            border: 1px solid #000;
            transform-style: preserve-3d;
            transform-origin: 50% 100%;
            transform:  translateZ(-150px) ;
            animation: temp-box-run linear 4s 1 forwards ;
        }
         @keyframes temp-box-run {
     
            0%,75%{
     
                transform: translateZ(-150px) ;
            }
            100%{
     
                transform: translateZ(-150px) rotateX(90deg);
            }
        } 
        .top{
     
            transform-origin: 50% 0%;    /* 改变x，y坐标 正常坐标：50% 50% */
            background-color: blueviolet;
            transform: rotateX(90deg);
            animation: top-run linear 5s 1 forwards ;
        }
        @keyframes top-run {
     
            0%, 80%{
     
                transform:  rotateX(90deg) ;
            }
            100%{
     
                transform:  rotateX(90deg) rotateX(90deg) ;
            }
        }
        .back{
     
            background-color: rgb(233, 10, 159);
        }


        .bottom{
     
            background-color: rgb(212, 11, 11);
            transform: rotateX(-90deg) translateZ(150px);
        }
        .left{
     
            background-color: rgb(15, 11, 238);
            transform: rotateY(90deg) translateZ(150px);
            transform-origin: 50% 100%;
            animation: left-run linear 1s 1 forwards;
        }
        @keyframes left-run {
     
            0%{
     
                transform: rotateY(90deg) translateZ(150px);
            }
            100%{
     
                transform: rotateY(90deg) translateZ(150px) rotateX(-90deg);
            }
        }
        .right{
     
            background-color: rgb(7, 240, 19);
            transform: rotateY(-90deg) translateZ(150px);
            transform-origin: 50% 100%; 
            /* 修改旋转的X轴位置，原本位置：x-y：50%-50% */
            animation: right-run linear 2s  1 forwards;
        }
        @keyframes right-run {
     
            0%,50%{
     
                transform: rotateY(-90deg) translateZ(150px);
            }
            100%{
     
                transform: rotateY(-90deg) translateZ(150px) rotateX(-90deg);
            }
        }
        .front{
     
            transform: translateZ(150px);
            transform-origin: 50% 100%;
            background-color: #d5e40e;
            animation: front-run linear 3s  1 forwards;
        }
        @keyframes front-run {
     
            0%,66.66%{
     
                transform: translateZ(150px);
            }
            100%{
     
                transform: translateZ(150px) rotateX(-90deg);
            }
        }
    </style>
</head>
<body>
     <div class="big-box">
        <div class="temp-box">
            <div class="top"></div>
            <div class="back"></div>
        </div>
        <div class="bottom"></div>
        <div class="left"></div>
        <div class="right"></div>
        <div class="front"></div>
     </div>
</body>
</html>

运行结果如下：

正方体展开

2.魔方的转动

思路：完成最中间小块，往每个方向移动即可，坐标图如下所示
在这里插入图片描述

具体代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魔方</title>
    <link rel="stylesheet" href="../魔方css/demo4.css">
    <link rel="stylesheet" href="../魔方css/animation.css">
</head>
<body>
     <div class="big-box">
        <ul class="u-2-2-2"> <!--以中间块为中心移动到相应位置 -->
            <li class="top"></li>
            <li class="bottom"></li>
            <li class="left"></li>
            <li class="right"></li>
            <li class="front"></li>
            <li class="back"></li>
        </ul>
        <!-- 第一层开始 -->
        <ul class="u-1-1-1"> 
            <li class="top"></li>
            <li class="bottom"></li>
            <li class="left"></li>
            <li class="right"></li>
            <li class="front"></li>
            <li class="back"></li>
        </ul>
        <ul class="u-2-1-1"> 
            <li class="top"></li>
            <li class="bottom"></li>
            <li class="left"></li>
            <li class="right"></li>
            <li class="front"></li>
            <li class="back"></li>
        </ul>
        <ul class="u-3-1-1"> 
            <li class="top"></li>
            <li class="bottom"></li>
            <li class="left"></li>
            <li class="right"></li>
            <li class="front"></li>
            <li class="back"></li>
        </ul>
        <ul class="u-1-1-2"> 
            <li class="top"></li>
            <li class="bottom"></li>
            <li class="left"></li>
            <li class="right"></li>
            <li class="front"></li>
            <li class="back">