用简单的html+css做一个魔方扭动特效ฅ(๑ ̀ㅅ ́๑)ฅ
效果图：CSDN上传不了本地的视频，但这个魔方是可以来回转动+逐层扭动的。
这个语法图看到下面的话后在翻上来看。
下面是mofang1.css
/*接下来是第一个CSS,这个控制的是魔方的整体大小尺寸和整个
魔方转动的动画,逐层扭动不在这个css里面*/
*{margin: 0;
padding: 0;
list-style: none;
}
.bigBox{
width: 300px;
height: 300px;
margin: 300px auto;
position: relative;
border: 1px solid black;
transform-style: preserve-3d;
/*perspective-origin: 50% 50%;
transform: rotateX(-30deg);
animation: box-run 10s linear infinite;*/
transform: rotateX(-30deg) rotateY(30deg);
animation:the-box 10s linear infinite;
/*这个不懂的详见前面发的animation的说明图,有简写,
也有逐行写出来的,在这里建议大家逐行写出来,有些记不清的到后面容易
出问题*/
}
@keyframes the-box {
/*这个是动画,0%,100%指的是这个过程,最开始和结束,也可分成更多段,
这点到后面会看到.*/
0%{
transform: rotateX(-30deg) rotateY(30deg);
}
100%{
transform: rotateX(-390deg) rotateY(390deg);
}
}
.bigBox ul{
width: 100px;
height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
transform-style: preserve-3d;
background: red;
}
.bigBox ul li{
width: 100px;
height: 100px;
position: absolute;
top: 0px;
left: 0px;
border-radius: 4px;
}
/*从top到behind是控制正方体的四个面,通过拨动它的X,Y,Z来控制它的位置.*/
.top{
background: pink;
transform:rotateX(90deg) translateZ(50px);
}
.bottom{
background-color: teal;
transform:rotateX(-90deg) translateZ(50px);
}
.left{
background-color: lightblue;
transform:rotateY(-90deg) translateZ(50px);
}
.right{
background-color: dodgerblue;
transform:rotateY(90deg) translateZ(50px);
}
.front{
background-color: plum;
transform:translateZ(50px);
}
.behind{
background-color: palevioletred;
transform:translateZ(-50px);
}
.u-1-1-1{
transform: translateX(-110px) translateY(-110px) translateZ(-110px);
animation: run-1-1-1 2s linear 1;
animation-fill-mode: forwards;
/* animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。*/
}
.u-2-1-1{
transform: translateX(-0px) translateY(-110px) translateZ(-110px);
animation: run-2-1-1 2s linear 1;
animation-fill-mode: forwards;
}
.u-3-1-1{
transform: translateX(110px) translateY(-110px) translateZ(-110px);
animation: run-3-1-1 2s linear 1;
animation-fill-mode: forwards;
}
.u-1-1-2{
transform: translateX(-110px) translateY(-110px) translateZ(0px);
animation:run-1-1-2 2s linear 1 ;
animation-fill-mode: forwards;
}
.u-2-1-2{
transform: translateX(0px) translateY(-110px) translateZ(0px);
animation: run-2-1-2 2s linear 1;
animation-fill-mode: forwards;
}
.u-3-1-2{
transform: translateX(110px) translateY(-110px) translateZ(0px);
animation: run-3-1-2 2s linear 1;
animation-fill-mode: forwards;
}
.u-1-1-3{
transform: translateX(-110px) translateY(-110px) translateZ(110px);
animation: run-1-1-3 2s linear 1;
animation-fill-mode: forwards;
}
.u-2-1-3{
transform: translateX(0px) translateY(-110px) translateZ(110px);
animation: run-2-1-3 2s linear 1;
animation-fill-mode: forwards;
}
.u-3-1-3{
transform: translateX(110px) translateY(-110px) translateZ(110px);
animation: run-3-1-3 2s linear 1;
animation-fill-mode: forwards;
}
.u-1-2-1{
transform: translateX(-110px) translateY(0px) translateZ(-110px);
animation: run-1-2-1 1s linear 1;
animation-delay: 1s;
/*这个是控制的是延迟的时间*/
animation-fill-mode: forwards;
}
.u-2-2-1{
transform: translateX(0px) translateY(0px) translateZ(-110px);
animation: run-2-2-1 1s linear 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.u-3-2-1{
transform: translateX(110px) translateY(0px) translateZ(-110px);
animation: run-3-2-1 1s linear 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.u-1-3-1{
transform: translateX(-110px) translateY(110px) translateZ(-110px);
animation: run-1-3-1 2s linear 1;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.u-2-3-1{
transform: translateX(0px) translateY(110px) translateZ(-110px);
animation: run-2-3-1 2s linear 1;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.u-3-3-1{
transform: translateX(110px) translateY(110px) translateZ(-110px);
animation: run-3-3-1 2s linear 1;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.u-1-2-2{
transform: translateX(-110px) translateY(0px) translateZ(0px);
animation: run-1-2-2 1s linear 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.u-2-2-2{
transform: translateX(0px) translateY(0px) translateZ(0px);
animation: run-2-2-2 1s linear 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.u-3-2-2{
transform: translateX(110px) translateY(0px) translateZ(0px);
animation: run-3-2-2 1s linear 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.u-1-2-3{
transform: translateX(-110px) translateY(0px) translateZ(110px);
animation: run-1-2-3 1s linear 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.u-2-2-3{
transform: translateX(0px) translateY(0px) translateZ(110px);
animation: run-2-2-3 1s linear 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.u-3-2-3{
transform: translateX(110px) translateY(0px) translateZ(110px);
animation: run-3-2-3 1s linear 1;
animation-delay: 1s;
animation-fill-mode: forwards;
}
.u-1-3-2{
transform: translateX(-110px) translateY(110px) translateZ(0px);
animation: run-1-3-2 2s linear 1;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.u-2-3-2{
transform: translateX(0px) translateY(110px) translateZ(0px);
animation: run-2-3-2 2s linear 1;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.u-3-3-2{
transform: translateX(110px) translateY(110px) translateZ(0px);
animation: run-3-3-2 2s linear 1;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.u-1-3-3{
transform: translateX(-110px) translateY(110px) translateZ(110px);
animation: run-1-3-3 2s linear 1;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.u-2-3-3{
transform: translateX(0px) translateY(110px) translateZ(110px);
animation: run-2-3-3 2s linear 1;
animation-delay: 2s;
animation-fill-mode: forwards;
}
.u-3-3-3{
transform: translateX(110px) translateY(110px) translateZ(110px);
animation: run-3-3-3 2s linear 1;
animation-delay: 2s;
animation-fill-mode: forwards;
}
下面是animation2.css
/*这个对应的是之前mofang1.css的animation*/
@keyframes run-1-1-1{
0%{
transform: rotateZ(0deg)rotateY(0deg)translateX(-110px) translateY(-110px) translateZ(-110px);
}
50%{
transform:rotateZ(0deg) rotateY(90deg)translateX(-110px) translateY(-110px) translateZ(-110px);
}
100%{
transform: rotateZ(0deg)rotateY(0deg)translateX(-110px) translateY(-110px) translateZ(-110px);
}
}
@keyframes run-2-1-1{
0%{
transform:rotateY(0deg) translateX(-0px) translateY(-110px) translateZ(-110px);
}
50%{
transform:rotateY(90deg)translateX(-0px) translateY(-110px) translateZ(-110px);
}
100%{
transform:rotateY(0deg) translateX(-0px) translateY(-110px) translateZ(-110px);
}
}
@keyframes run-3-1-1{
0%{
transform:rotateZ(0deg)rotateY(0deg) translateX(110px) translateY(-110px) translateZ(-110px);
}
50%{
transform:rotateZ(0deg)rotateY(90deg)translateX(110px) translateY(-110px) translateZ(-110px);
}
100%{
transform:rotateZ(0deg)rotateY(0deg) translateX(110px) translateY(-110px) translateZ(-110px);
}
}
@keyframes run-1-1-2{
0%{
transform: rotateZ(0deg)rotateY(0deg)translateX(-110px) translateY(-110px) translateZ(0px);
}
50%{
transform:rotateZ(0deg) rotateY(90deg)translateX(-110px) translateY(-110px) translateZ(0px);
}
100%{
transform: rotateZ(0deg)rotateY(0deg)translateX(-110px) translateY(-110px) translateZ(0px);
}
}
@keyframes run-2-1-2{
0%{
transform: rotateY(0deg)translateX(0px) translateY(-110px) translateZ(0px);
}
50%{
transform: rotateY(90deg)translateX(0px) translateY(-110px) translateZ(0px);
}
100%{
transform: rotateY(0deg)translateX(0px) translateY(-110px) translateZ(0px);
}
}
@keyframes run-3-1-2{
0%{
transform: rotateY(0deg)ttranslateX(110px) translateY(-110px) translateZ(0px);
}
50%{
transform: rotateY(90deg)translateX(110px) translateY(-110px) translateZ(0px);
}
100%{
transform: rotateY(0deg)ttranslateX(110px) translateY(-110px) translateZ(0px);
}
}
@keyframes run-1-1-3{
0%{
transform: rotateZ(0deg)rotateY(0deg)translateX(-110px) translateY(-110px) translateZ(110px);
}
50%{
transform:rotateZ(0deg) rotateY(90deg)translateX(-110px) translateY(-110px) translateZ(110px);
}
100%{
transform: rotateZ(0deg)rotateY(0deg)translateX(-110px) translateY(-110px) translateZ(110px);
}
}
@keyframes run-2-1-3{
0%{
transform: rotateY(0deg) translateX(0px) translateY(-110px) translateZ(110px);
}
50%{
transform: rotateY(90deg) translateX(0px) translateY(-110px) translateZ(110px);
}
100%{
transform: rotateY(0deg) translateX(0px) translateY(-110px) translateZ(110px);
}
}
@keyframes run-3-1-3{
0%{
transform: rotateY(0deg) translateX(110px) translateY(-110px) translateZ(110px);
}
50%{
```bash
transform: rotateY(90deg) translateX(110px) translateY(-110px) translateZ(110px);
}
100%{
transform: rotateY(0deg) translateX(110px) translateY(-110px) translateZ(110px);
}
}
/*第二转*/
```bash
@keyframes run-1-2-1{
0%{
transform: rotateY(0deg) translateX(-110px) translateY(0px) translateZ(-110px);
}
100%{
transform: rotateY(90deg) translateX(-110px) translateY(0px) translateZ(-110px);
}
}
@keyframes run-2-2-1{
0%{
transform: rotateY(0deg) translateX(0px) translateY(0px) transla
teZ(-110px);
}
100%{
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(-110px);
}
}
@keyframes run-3-2-1{
0%{
transform: rotateY(0deg) translateX(110px) translateY(0px) translateZ(-110px);
}
100%{
transform: rotateY(90deg) translateX(110px) translateY(0px) translateZ(-110px);
}
}
@keyframes run-1-2-2{
0%{
transform: rotateY(0deg) translateX(-110px) translateY(0px) translateZ(0px);
}
100%{
transform: rotateY(90deg) translateX(-110px) translateY(0px) translateZ(0px);
}
}
@keyframes run-2-2-2{
0%{
transform: rotateY(0deg) translateX(0px) translateY(0px) translateZ(0px);
}
100%{
transform: rotateY(90deg)translateX(0px) translateY(0px) translateZ(0px);
}
}
@keyframes run-3-2-2{
0%{
transform: rotateY(0deg) translateX(110px) translateY(0px) translateZ(0px);
}
100%{
transform: rotateY(90deg) translateX(110px) translateY(0px) translateZ(0px);
}
}
@keyframes run-1-2-3{
0%{
transform: rotateY(0deg) translateX(-110px) translateY(0px) translateZ(110px);
}
100%{
transform: rotateY(90deg) translateX(-110px) translateY(0px) translateZ(110px);
}
}
@keyframes run-2-2-3{
0%{
transform: rotateY(0deg) translateX(0px) translateY(0px) translateZ(110px);
}
100%{
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(110px);
}
}
@keyframes run-3-2-3{
0%{
transform: rotateY(0deg) translateX(110px) translateY(0px) translateZ(110px);
}
100%{
transform: rotateY(90deg)translateX(110px) translateY(0px) translateZ(110px);
}
}
@keyframes run-1-3-1{
0%{
transform: rotateY(0deg) translateX(-110px) translateY(110px) translateZ(-110px);
}
50%{
transform: rotateY(90deg)translateX(-110px) translateY(110px) translateZ(-110px);
}
100%{
transform: rotateY(0deg) translateX(-110px) translateY(110px) translateZ(-110px);
}
}
@keyframes run-2-3-1{
0%{
transform: rotateY(0deg) translateX(0px) translateY(110px) translateZ(-110px);
}
50%{
transform: rotateY(90deg)translateX(0px) translateY(110px) translateZ(-110px);
}
100%{
transform: rotateY(0deg) translateX(0px) translateY(110px) translateZ(-110px);
}
}
@keyframes run-3-3-1{
0%{
transform: rotateY(0deg) translateX(110px) translateY(110px) translateZ(-110px);
}
50%{
transform: rotateY(90deg)translateX(110px) translateY(110px) translateZ(-110px);
}
100%{
transform: rotateY(0deg) translateX(110px) translateY(110px) translateZ(-110px);
}
}
@keyframes run-1-3-2{
0%{
transform: rotateY(0deg)translateX(-110px) translateY(110px) translateZ(0px);
}
50%{
transform: rotateY(90deg)translateX(-110px) translateY(110px) translateZ(0px);
}
100%{
transform: rotateY(0deg)translateX(-110px) translateY(110px) translateZ(0px);
}
}
@keyframes run-2-3-2{
0%{
transform: rotateY(0deg) translateX(0px) translateY(110px) translateZ(0px);
}
50%{
transform: rotateY(90deg)translateX(0px) translateY(110px) translateZ(0px);
}
100%{
transform: rotateY(0deg) translateX(0px) translateY(110px) translateZ(0px);
}
}
@keyframes run-3-3-2{
0%{
transform: rotateY(0deg)translateX(110px) translateY(110px) translateZ(0px);
}
50%{
transform: rotateY(90deg)translateX(110px) translateY(110px) translateZ(0px);
}
100%{
transform: rotateY(0deg)translateX(110px) translateY(110px) translateZ(0px);
}
}
@keyframes run-1-3-3{
0%{
transform: rotateY(0deg)translateX(-110px) translateY(110px) translateZ(110px);
}
50%{
transform: rotateY(90deg)translateX(-110px) translateY(110px) translateZ(110px);
}
100%{
transform: rotateY(0deg)translateX(-110px) translateY(110px) translateZ(110px);
}
}
@keyframes run-2-3-3{
0%{
transform: rotateY(0deg) translateX(0px) translateY(110px) translateZ(110px);
}
50%{
transform: rotateY(90deg) translateX(0px) translateY(110px) translateZ(110px);
}
100%{
transform: rotateY(0deg) translateX(0px) translateY(110px) translateZ(110px);
}
}
@keyframes run-3-3-3{
0%{
transform: rotateY(0deg)translateX(110px) translateY(110px) translateZ(110px);
}
50%{
transform: rotateY(90deg)translateX(110px) translateY(110px) translateZ(110px);
}
100%{
transform: rotateY(0deg)translateX(110px) translateY(110px) translateZ(110px);
}
总的来说比较简单，就是控制在animation和transform，希望能帮助到大家。
