简述web前端 A001-魔方

最新推荐文章于 2021-12-05 13:36:08 发布
最新推荐文章于 2021-12-05 13:36:08 发布
阅读量703 收藏 3
点赞数
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_37524974/article/details/55192973
本文展示了一个使用纯CSS实现的3D魔方动画效果，通过精确设置旋转角度及位置来模拟魔方翻转的过程。文章详细介绍了魔方各面及其小块的位置布局，并运用CSS3的transform属性实现了流畅的3D动画。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!doctype html><!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    margin-top: 50px;
}


/*外层容器样式*/

.outer {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 200px;
    height: 200px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d
    transform-style: preserve-3d;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}


/*内层容器样式*/

.inner {
    /*开启3D视图*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /*-webkit-perspective: 1000px;*/
    /*动画样式*/
    -webkit-animation: change 6s linear infinite;
    -moz--animation: change 6s linear infinite;
    animation: change 6s linear infinite;
}


/*动画*/

@-webkit-keyframes change {
    0% {
        -webkit-transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
    }
    33% {
        -webkit-transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
    }
    66% {
        -webkit-transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
    }
    100% {
        -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
    }
}
@-moz-keyframes change {
    0% {
        -webkit-transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
    }
    33% {
        -webkit-transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
    }
    66% {
        -webkit-transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
    }
    100% {
        -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
    }
}
@keyframes change {
    0% {
        transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
    }
    33% {
        transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
    }
    66% {
        transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
    }
    100% {
        transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
    }
}
/*六大面通用样式*/
.inner>div {
    height: 308px;
    width: 308px;
    text-align: center;
    line-height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
}


/*前面样式*/

.front {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #AF2BB5;
    -webkit-transform: translateZ(158px);
    -moz-transform: translateZ(158px);
    transform: translateZ(158px);
}


/*后面样式*/

.after {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #1EA26E;
    -webkit-transform: translateZ(-158px);
    -moz-transform: translateZ(-158px);
    transform: translateZ(-158px);
}


/*左面样式*/

.left {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #D1CF18;
    -webkit-transform: rotateY(90deg) translateZ(158px);
    -moz-transform: rotateY(90deg) translateZ(158px);
    transform: rotateY(90deg) translateZ(158px);
}


/*右面样式*/

.right {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #197FAA;
    -webkit-transform: rotateY(90deg) translateZ(-158px);
    -moz-transform: rotateY(90deg) translateZ(-158px);
    transform: rotateY(90deg) translateZ(-158px);
}


/*上面样式*/

.up {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #C91443;
    -webkit-transform: rotateX(90deg) translateZ(158px);
    -moz-transform: rotateX(90deg) translateZ(158px);
    transform: rotateX(90deg) translateZ(158px);
}


/*下面样式*/

.down {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #0FB0AC;
    -webkit-transform: rotateX(90deg) translateZ(-158px);
    -moz-transform: rotateX(90deg) translateZ(-158px);
    transform: rotateX(90deg) translateZ(-158px);
}


/*前面9个小div样式*/

.front>div {
    height: 100px;
    width: 100px;
    background: #8A2BE2;
    border-radius: 10px;
}

.front1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.front2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.front3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.front4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.front5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.front6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.front7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.front8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.front9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*后面9个小div样式*/

.after div {
    height: 100px;
    width: 100px;
    background: #04EC99;
    border-radius: 10px;
}

.after1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.after2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.after3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.after4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.after5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.after6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.after7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.after8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.after9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*左面9个小div样式*/

.left div {
    height: 100px;
    width: 100px;
    background: #F4F871;
    border-radius: 10px;
}

.left1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.left2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.left3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.left4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.left5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.left6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.left7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.left8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.left9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*右面9个小div样式*/

.right div {
    height: 100px;
    width: 100px;
    background: #7FB6FF;
    border-radius: 10px;
}

.right1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.right2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.right3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.right4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.right5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.right6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.right7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.right8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.right9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*上面9个小div样式*/

.up div {
    height: 100px;
    width: 100px;
    background: #FF7F8F;
    border-radius: 10px;
}

.up1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.up2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.up3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.up4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.up5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.up6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.up7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.up8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.up9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*下面9个小div样式*/

.down div {
    height: 100px;
    width: 100px;
    background: #6FFFFA;
    border-radius: 10px;
}

.down1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.down2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.down3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.down4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.down5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.down6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.down7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.down8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.down9 {
    position: absolute;
    left: 206px;
    top: 206px;
}

</style>
</head>

<body>
<h1>3D魔方</h1>
    <div class="outer">
        <div class="inner">
            <div class="front">
                <div class="front1">1</div>
                <div class="front2">2</div>
                <div class="front3">3</div>
                <div class="front4">4</div>
                <div class="front5">5</div>
                <div class="front6">6</div>
                <div class="front7">7</div>
                <div class="front8">8</div>
                <div class="front9">9</div>
            </div>
            <div class="after">
                <div class="after1">1</div>
                <div class="after2">2</div>
                <div class="after3">3</div>
                <div class="after4">4</div>
                <div class="after5">5</div>
                <div class="after6">6</div>
                <div class="after7">7</div>
                <div class="after8">8</div>
                <div class="after9">9</div>
            </div>
            <div class="left">
                <div class="left1">1</div>
                <div class="left2">2</div>
                <div class="left3">3</div>
                <div class="left4">4</div>
                <div class="left5">5</div>
                <div class="left6">6</div>
                <div class="left7">7</div>
                <div class="left8">8</div>
                <div class="left9">9</div>
            </div>
            <div class="right">
                <div class="right1">1</div>
                <div class="right2">2</div>
                <div class="right3">3</div>
                <div class="right4">4</div>
                <div class="right5">5</div>
                <div class="right6">6</div>
                <div class="right7">7</div>
                <div class="right8">8</div>
                <div class="right9">9</div>
            </div>
            <div class="up">
                <div class="up1">1</div>
                <div class="up2">2</div>
                <div class="up3">3</div>
                <div class="up4">4</div>
                <div class="up5">5</div>
                <div class="up6">6</div>
                <div class="up7">7</div>
                <div class="up8">8</div>
                <div class="up9">9</div>
            </div>
            <div class="down">
                <div class="down1">1</div>
                <div class="down2">2</div>
                <div class="down3">3</div>
                <div class="down4">4</div>
                <div class="down5">5</div>
                <div class="down6">6</div>
                <div class="down7">7</div>
                <div class="down8">8</div>
                <div class="down9">9</div>
            </div>
        </div>
    </div>
</body>

</html>

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}

h1 {
    text-align: center;
    margin-top: 50px;
}


/*外层容器样式*/

.outer {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 200px;
    height: 200px;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d
    transform-style: preserve-3d;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}


/*内层容器样式*/

.inner {
    /*开启3D视图*/
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    /*-webkit-perspective: 1000px;*/
    /*动画样式*/
    -webkit-animation: change 6s linear infinite;
    -moz--animation: change 6s linear infinite;
    animation: change 6s linear infinite;
}


/*动画*/

@-webkit-keyframes change {
    0% {
        -webkit-transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
    }
    33% {
        -webkit-transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
    }
    66% {
        -webkit-transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
    }
    100% {
        -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
    }
}
@-moz-keyframes change {
    0% {
        -webkit-transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
    }
    33% {
        -webkit-transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
    }
    66% {
        -webkit-transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
    }
    100% {
        -webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
    }
}
@keyframes change {
    0% {
        transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
    }
    33% {
        transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
    }
    66% {
        transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
    }
    100% {
        transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
    }
}
/*六大面通用样式*/
.inner>div {
    height: 308px;
    width: 308px;
    text-align: center;
    line-height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
}


/*前面样式*/

.front {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #AF2BB5;
    -webkit-transform: translateZ(158px);
    -moz-transform: translateZ(158px);
    transform: translateZ(158px);
}


/*后面样式*/

.after {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #1EA26E;
    -webkit-transform: translateZ(-158px);
    -moz-transform: translateZ(-158px);
    transform: translateZ(-158px);
}


/*左面样式*/

.left {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #D1CF18;
    -webkit-transform: rotateY(90deg) translateZ(158px);
    -moz-transform: rotateY(90deg) translateZ(158px);
    transform: rotateY(90deg) translateZ(158px);
}


/*右面样式*/

.right {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #197FAA;
    -webkit-transform: rotateY(90deg) translateZ(-158px);
    -moz-transform: rotateY(90deg) translateZ(-158px);
    transform: rotateY(90deg) translateZ(-158px);
}


/*上面样式*/

.up {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #C91443;
    -webkit-transform: rotateX(90deg) translateZ(158px);
    -moz-transform: rotateX(90deg) translateZ(158px);
    transform: rotateX(90deg) translateZ(158px);
}


/*下面样式*/

.down {
    margin-top: -154px;
    margin-left: -154px;
    border: 5px solid #0FB0AC;
    -webkit-transform: rotateX(90deg) translateZ(-158px);
    -moz-transform: rotateX(90deg) translateZ(-158px);
    transform: rotateX(90deg) translateZ(-158px);
}


/*前面9个小div样式*/

.front>div {
    height: 100px;
    width: 100px;
    background: #8A2BE2;
    border-radius: 10px;
}

.front1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.front2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.front3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.front4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.front5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.front6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.front7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.front8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.front9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*后面9个小div样式*/

.after div {
    height: 100px;
    width: 100px;
    background: #04EC99;
    border-radius: 10px;
}

.after1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.after2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.after3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.after4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.after5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.after6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.after7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.after8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.after9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*左面9个小div样式*/

.left div {
    height: 100px;
    width: 100px;
    background: #F4F871;
    border-radius: 10px;
}

.left1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.left2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.left3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.left4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.left5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.left6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.left7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.left8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.left9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*右面9个小div样式*/

.right div {
    height: 100px;
    width: 100px;
    background: #7FB6FF;
    border-radius: 10px;
}

.right1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.right2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.right3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.right4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.right5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.right6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.right7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.right8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.right9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*上面9个小div样式*/

.up div {
    height: 100px;
    width: 100px;
    background: #FF7F8F;
    border-radius: 10px;
}

.up1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.up2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.up3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.up4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.up5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.up6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.up7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.up8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.up9 {
    position: absolute;
    left: 206px;
    top: 206px;
}


/*下面9个小div样式*/

.down div {
    height: 100px;
    width: 100px;
    background: #6FFFFA;
    border-radius: 10px;
}

.down1 {
    position: absolute;
    left: 2px;
    top: 2px;
}

.down2 {
    position: absolute;
    left: 104px;
    top: 2px;
}

.down3 {
    position: absolute;
    left: 206px;
    top: 2px;
}

.down4 {
    position: absolute;
    left: 2px;
    top: 104px;
}

.down5 {
    position: absolute;
    left: 104px;
    top: 104px;
}

.down6 {
    position: absolute;
    left: 206px;
    top: 104px;
}

.down7 {
    position: absolute;
    left: 2px;
    top: 206px;
}

.down8 {
    position: absolute;
    left: 104px;
    top: 206px;
}

.down9 {
    position: absolute;
    left: 206px;
    top: 206px;
}

</style>
</head>

<body>
<h1>3D魔方</h1>
    <div class="outer">
        <div class="inner">
            <div class="front">
                <div class="front1">1</div>
                <div class="front2">2</div>
                <div class="front3">3</div>
                <div class="front4">4</div>
                <div class="front5">5</div>
                <div class="front6">6</div>
                <div class="front7">7</div>
                <div class="front8">8</div>
                <div class="front9">9</div>
            </div>
            <div class="after">
                <div class="after1">1</div>
                <div class="after2">2</div>
                <div class="after3">3</div>
                <div class="after4">4</div>
                <div class="after5">5</div>
                <div class="after6">6</div>
                <div class="after7">7</div>
                <div class="after8">8</div>
                <div class="after9">9</div>
            </div>
            <div class="left">
                <div class="left1">1</div>
                <div class="left2">2</div>
                <div class="left3">3</div>
                <div class="left4">4</div>
                <div class="left5">5</div>
                <div class="left6">6</div>
                <div class="left7">7</div>
                <div class="left8">8</div>
                <div class="left9">9</div>
            </div>
            <div class="right">
                <div class="right1">1</div>
                <div class="right2">2</div>
                <div class="right3">3</div>
                <div class="right4">4</div>
                <div class="right5">5</div>
                <div class="right6">6</div>
                <div class="right7">7</div>
                <div class="right8">8</div>
                <div class="right9">9</div>
            </div>
            <div class="up">
                <div class="up1">1</div>
                <div class="up2">2</div>
                <div class="up3">3</div>
                <div class="up4">4</div>
                <div class="up5">5</div>
                <div class="up6">6</div>
                <div class="up7">7</div>
                <div class="up8">8</div>
                <div class="up9">9</div>
            </div>
            <div class="down">
                <div class="down1">1</div>
                <div class="down2">2</div>
                <div class="down3">3</div>
                <div class="down4">4</div>
                <div class="down5">5</div>
                <div class="down6">6</div>
                <div class="down7">7</div>
                <div class="down8">8</div>
                <div class="down9">9</div>
            </div>
        </div>
    </div>
</body>

</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

h1 {
text-align: center;
margin-top: 50px;
}


/*外层容器样式*/

.outer {
position: absolute;
top: 50%;
left: 45%;
width: 200px;
height: 200px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d
transform-style: preserve-3d;
-moz-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
backface-visibility: hidden;
}


/*内层容器样式*/

.inner {
/*开启3D视图*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
/*-webkit-perspective: 1000px;*/
/*动画样式*/
-webkit-animation: change 6s linear infinite;
-moz--animation: change 6s linear infinite;
animation: change 6s linear infinite;
}


/*动画*/

@-webkit-keyframes change {
0% {
-webkit-transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
}
33% {
-webkit-transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
}
66% {
-webkit-transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
}
100% {
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
}
}
@-moz-keyframes change {
0% {
-webkit-transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
}
33% {
-webkit-transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
}
66% {
-webkit-transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
}
100% {
-webkit-transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
}
}
@keyframes change {
0% {
transform: translateZ(-10em) rotateX(0deg) rotateY(0deg);
}
33% {
transform: translateZ(-10em) rotateX(120deg) rotateY(240deg);
}
66% {
transform: translateZ(-10em) rotateX(240deg) rotateY(480deg);
}
100% {
transform: translateZ(-10em) rotateX(360deg) rotateY(720deg);
}
}
/*六大面通用样式*/
.inner>div {
height: 308px;
width: 308px;
text-align: center;
line-height: 100px;
position: absolute;
top: 50%;
left: 50%;
}


/*前面样式*/

.front {
margin-top: -154px;
margin-left: -154px;
border: 5px solid #AF2BB5;
-webkit-transform: translateZ(158px);
-moz-transform: translateZ(158px);
transform: translateZ(158px);
}


/*后面样式*/

.after {
margin-top: -154px;
margin-left: -154px;
border: 5px solid #1EA26E;
-webkit-transform: translateZ(-158px);
-moz-transform: translateZ(-158px);
transform: translateZ(-158px);
}


/*左面样式*/

.left {
margin-top: -154px;
margin-left: -154px;
border: 5px solid #D1CF18;
-webkit-transform: rotateY(90deg) translateZ(158px);
-moz-transform: rotateY(90deg) translateZ(158px);
transform: rotateY(90deg) translateZ(158px);
}


/*右面样式*/

.right {
margin-top: -154px;
margin-left: -154px;
border: 5px solid #197FAA;
-webkit-transform: rotateY(90deg) translateZ(-158px);
-moz-transform: rotateY(90deg) translateZ(-158px);
transform: rotateY(90deg) translateZ(-158px);
}


/*上面样式*/

.up {
margin-top: -154px;
margin-left: -154px;
border: 5px solid #C91443;
-webkit-transform: rotateX(90deg) translateZ(158px);
-moz-transform: rotateX(90deg) translateZ(158px);
transform: rotateX(90deg) translateZ(158px);
}


/*下面样式*/

.down {
margin-top: -154px;
margin-left: -154px;
border: 5px solid #0FB0AC;
-webkit-transform: rotateX(90deg) translateZ(-158px);
-moz-transform: rotateX(90deg) translateZ(-158px);
transform: rotateX(90deg) translateZ(-158px);
}


/*前面9个小div样式*/

.front>div {
height: 100px;
width: 100px;
background: #8A2BE2;
border-radius: 10px;
}

.front1 {
position: absolute;
left: 2px;
top: 2px;
}

.front2 {
position: absolute;
left: 104px;
top: 2px;
}

.front3 {
position: absolute;
left: 206px;
top: 2px;
}

.front4 {
position: absolute;
left: 2px;
top: 104px;
}

.front5 {
position: absolute;
left: 104px;
top: 104px;
}

.front6 {
position: absolute;
left: 206px;
top: 104px;
}

.front7 {
position: absolute;
left: 2px;
top: 206px;
}

.front8 {
position: absolute;
left: 104px;
top: 206px;
}

.front9 {
position: absolute;
left: 206px;
top: 206px;
}


/*后面9个小div样式*/

.after div {
height: 100px;
width: 100px;
background: #04EC99;
border-radius: 10px;
}

.after1 {
position: absolute;
left: 2px;
top: 2px;
}

.after2 {
position: absolute;
left: 104px;
top: 2px;
}

.after3 {
position: absolute;
left: 206px;
top: 2px;
}

.after4 {
position: absolute;
left: 2px;
top: 104px;
}

.after5 {
position: absolute;
left: 104px;
top: 104px;
}

.after6 {
position: absolute;
left: 206px;
top: 104px;
}

.after7 {
position: absolute;
left: 2px;
top: 206px;
}

.after8 {
position: absolute;
left: 104px;
top: 206px;
}

.after9 {
position: absolute;
left: 206px;
top: 206px;
}


/*左面9个小div样式*/

.left div {
height: 100px;
width: 100px;
background: #F4F871;
border-radius: 10px;
}

.left1 {
position: absolute;
left: 2px;
top: 2px;
}

.left2 {
position: absolute;
left: 104px;
top: 2px;
}

.left3 {
position: absolute;
left: 206px;
top: 2px;
}

.left4 {
position: absolute;
left: 2px;
top: 104px;
}

.left5 {
position: absolute;
left: 104px;
top: 104px;
}

.left6 {
position: absolute;
left: 206px;
top: 104px;
}

.left7 {
position: absolute;
left: 2px;
top: 206px;
}

.left8 {
position: absolute;
left: 104px;
top: 206px;
}

.left9 {
position: absolute;
left: 206px;
top: 206px;
}


/*右面9个小div样式*/

.right div {
height: 100px;
width: 100px;
background: #7FB6FF;
border-radius: 10px;
}

.right1 {
position: absolute;
left: 2px;
top: 2px;
}

.right2 {
position: absolute;
left: 104px;
top: 2px;
}

.right3 {
position: absolute;
left: 206px;
top: 2px;
}

.right4 {
position: absolute;
left: 2px;
top: 104px;
}

.right5 {
position: absolute;
left: 104px;
top: 104px;
}

.right6 {
position: absolute;
left: 206px;
top: 104px;
}

.right7 {
position: absolute;
left: 2px;
top: 206px;
}

.right8 {
position: absolute;
left: 104px;
top: 206px;
}

.right9 {
position: absolute;
left: 206px;
top: 206px;
}


/*上面9个小div样式*/

.up div {
height: 100px;
width: 100px;
background: #FF7F8F;
border-radius: 10px;
}

.up1 {
position: absolute;
left: 2px;
top: 2px;
}

.up2 {
position: absolute;
left: 104px;
top: 2px;
}

.up3 {
position: absolute;
left: 206px;
top: 2px;
}

.up4 {
position: absolute;
left: 2px;
top: 104px;
}

.up5 {
position: absolute;
left: 104px;
top: 104px;
}

.up6 {
position: absolute;
left: 206px;
top: 104px;
}

.up7 {
position: absolute;
left: 2px;
top: 206px;
}

.up8 {
position: absolute;
left: 104px;
top: 206px;
}

.up9 {
position: absolute;
left: 206px;
top: 206px;
}


/*下面9个小div样式*/

.down div {
height: 100px;
width: 100px;
background: #6FFFFA;
border-radius: 10px;
}

.down1 {
position: absolute;
left: 2px;
top: 2px;
}

.down2 {
position: absolute;
left: 104px;
top: 2px;
}

.down3 {
position: absolute;
left: 206px;
top: 2px;
}

.down4 {
position: absolute;
left: 2px;
top: 104px;
}

.down5 {
position: absolute;
left: 104px;
top: 104px;
}

.down6 {
position: absolute;
left: 206px;
top: 104px;
}

.down7 {
position: absolute;
left: 2px;
top: 206px;
}

.down8 {
position: absolute;
left: 104px;
top: 206px;
}

.down9 {
position: absolute;
left: 206px;
top: 206px;
}

</style>
</head>

<body>
<h1>3D魔方</h1>
<div class="outer">
<div class="inner">
<div class="front">
<div class="front1">1</div>
<div class="front2">2</div>
<div class="front3">3</div>
<div class="front4">4</div>
<div class="front5">5</div>
<div class="front6">6</div>
<div class="front7">7</div>
<div class="front8">8</div>
<div class="front9">9</div>
</div>
<div class="after">
<div class="after1">1</div>
<div class="after2">2</div>
<div class="after3">3</div>
<div class="after4">4</div>
<div class="after5">5</div>
<div class="after6">6</div>
<div class="after7">7</div>
<div class="after8">8</div>
<div class="after9">9</div>
</div>
<div class="left">
<div class="left1">1</div>
<div class="left2">2</div>
<div class="left3">3</div>
<div class="left4">4</div>
<div class="left5">5</div>
<div class="left6">6</div>
<div class="left7">7</div>
<div class="left8">8</div>
<div class="left9">9</div>
</div>
<div class="right">
<div class="right1">1</div>
<div class="right2">2</div>
<div class="right3">3</div>
<div class="right4">4</div>
<div class="right5">5</div>
<div class="right6">6</div>
<div class="right7">7</div>
<div class="right8">8</div>
<div class="right9">9</div>
</div>
<div class="up">
<div class="up1">1</div>
<div class="up2">2</div>
<div class="up3">3</div>
<div class="up4">4</div>
<div class="up5">5</div>
<div class="up6">6</div>
<div class="up7">7</div>
<div class="up8">8</div>
<div class="up9">9</div>
</div>
<div class="down">
<div class="down1">1</div>
<div class="down2">2</div>
<div class="down3">3</div>
<div class="down4">4</div>
<div class="down5">5</div>
<div class="down6">6</div>
<div class="down7">7</div>
<div class="down8">8</div>
<div class="down9">9</div>
</div>
</div>
</div>
</body>

</html>
有待完善 尽请期待.......

我的其他文章

ZP_Fly6688
关注
自学web前端练手——魔方实现（css3+html+js）
lvshaoshishang的博客
03-23 2348
以css3的平移、旋转、动画为主体构成。 效果如下：（发现不能传小视频就只能粗略截几张图了） 有九宫格飞出去飞回来的效果（一边旋转一边飞），但只设置飞一次，飞回来后只旋转魔方，但我发现有一个面永远转不到他不知道为啥_(:з」∠)_ 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charse...
A001 - 基础 - 交换机原理简述
weixin_38662859的博客
11-15 876
源自 HCIE-DATACOM 相关文档的阅读整理，简述了交换机的原理
网页实现三维魔方
04-01
基于js的三维魔方，实现三维魔方的立体呈现，能操作魔方三维旋转。
Web前端——魔方
高冷男孩不吃苹果的博客
12-04 859
html web前端实现好玩的动态魔方
【前端】css3实现三阶魔方原型
qq393912540的博客
05-07 851
点击查看效果 源码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三阶魔方模型展示</title> <style> body{ background: rgb(0,0,0); } /*星...
前端小项目（三）| 魔方魔方（html、css、js）
qq_43248263的博客
12-05 1852
文章目录前言一、HTML二、CSS三、JavaScript 前言 MOOC课程的实践项目，做一个魔方~ 效果长这样~魔方在自主转动，且每个面的小方块可以飞走飞回。 代码放在：https://github.com/titibabybaby/FED/tree/main/rubik’s%20Cube 一、HTML 魔方是一个正方体，所以我们首先构造一个正方体。 html体现整个结构，都是div标签来表现的，整个container下有个box，box下有六个div，表示魔方的六个面。 <div clas
IP-A001-A0-文件管理程序.doc
12-24
艾欧康耐（东莞）电子科技有限公司的文件管理系统是一项精心设计的机制，用以确保公司经营、管理、质量、环境及GP系统所使用的文件得到系统性的制订、修订、废止、审查和核准，并且确保文件的迅速处理与正确流通。...
A001-MySQL安装、MySQL优化、innodb 锁问题监控处理、MySQL binlog日志、MySQL 基础
07-16
A001-MySQL安装 A002-MySQL优化 A003-innodb 锁问题监控处理 A004-MySQL binlog日志 A005-MySQL 基础 A006-SQL语法 A007-MySQL 修改密码 特点和功能： 开源性： MySQL是开源软件，可以免费获取和使用。它...
rac_basic_sample_project-图纸-A001-TitleSheet-渲染-Kitchen.dwg
06-01
c_sample_project-图纸-A001-TitleSheet-渲染-Kitchen.dwg
a001-201303.素雅灰度_罗列式_适用于应届生_2页式_无内容_有封面.doc.zip
最新发布
11-18
在当今竞争激烈的职场环境中，一份专业且符合个人气质的简历，对于求职者而言无疑是一张进入理想企业的入场券。针对应届生这一特殊群体，专门设计的简历模板，能够帮助他们更好地展示自己的学习经历、实习经验及个人...
html5实现魔方游戏
05-26
直接下载解压后使用
CSS3 HTML5 魔方demo
11-21
CSS3 HTML5 魔方。 CSS3旋转，变换，动画。 魔方可通过鼠标控制旋转。
魔方源码（基于threejs）
08-08
纯threejs 制作的魔方
3d魔方游戏h5（HTML5）
03-23
魔方游戏，具体代码，可以运行，具体效果图本博客有
HTML5 魔方
12-05
HTML5 写的魔方游戏。仅供学习，请勿侵权。
前端开发工具_掌门前端破茧成蝶之：低代码开发工具——魔方
weixin_39870150的博客
12-02 612
前言本期分享由@掌门教育研发部前端团队授权分享。正文从这开始~~起源我们部门肩负着全公司90%左右的后台业务系统项目，大大小小的后台系统数量繁多，业务量还在不断快速增长，前端开发人员不能无限扩招，人力已成为瓶颈。面对如此艰难现状，我们提出了提升人效的方案：从零开发一套适用于本部门业务场景的前端开发工具，通过可视化、低代码的开发方式快速搭建业务系统，从而达到突破人力瓶颈，节约人力成本的最终...
css3实现简易魔方
webstalker
04-15 2265
demo .stage{ position:relative; top:50px; } .box_before,.box_back,.box_left,.box_right,.box_top,.box_bottom { height:240px; width:240px; text-align:center; font-weight:bolder; color:yellow;
魔方html语言,CSS3 前端开发实现魔方
weixin_35135480的博客
05-31 164
/p><魔方*{margin:0;padding:0;}.wrapper{width:1000px;height:600px;/*background:#eee;*/margin:20pxauto;perspective:1000px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-tra...
HTML+CSS+JS实现 ❤️3D立体魔方小游戏❤️
java李阳勇的博客
09-09 2463
???? 作者主页：Java李杨勇 ???? 简介：Java领域优质创作者????、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】 ???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 效果演示：文末获取源码 代码目录： 主要代码实现： 部分CSS样式： .cube { width: 100%; height: 100%; } @font-face { font
cnas-cl01-a001-2022
01-20
cnas-cl01-a001-2022是一个代号，可能代表某个系统、设备或者项目的编号。根据代号的命名规则，"cnas"可能指代某个部门或者机构，"cl01"可能是该部门内部的一个部门或者项目代码，"a001"可能是具体的设备或者系统...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值