body {
margin:0;
overflow:hidden;
width:100vw;
height:100vh;
background:#222;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
.world {
-webkit-perspective:800px;
perspective:800px;
width:100vh;
height:100vh;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
.cube {
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
width:50vh;
height:50vh;
position:relative;
-webkit-animation:rotator 4.5s linear infinite;
animation:rotator 4.5s linear infinite;
outline:0;
}
.cube * {
background:#000;
box-shadow:0 0 3vh currentColor;
-webkit-transition:background 0.4s ease-in-out,box-shadow 0.4s ease-in-out;
transition:background 0.4s ease-in-out,box-shadow 0.4s ease-in-out;
}
.cube:hover * {
background:currentColor;
box-shadow:0 0 20vh currentColor;
}
.cube .cube__front {
color:deeppink;
-webkit-transform:translateZ(25vh);
transform:translateZ(25vh);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.cube .cube__right {
color:lightcoral;
-webkit-transform:rotateY(90deg) translateZ(25vh);
transform:rotateY(90deg) translateZ(25vh);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.cube .cube__left {
color:skyblue;
-webkit-transform:rotateY(270deg) translateZ(25vh);
transform:rotateY(270deg) translateZ(25vh);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.cube .cube__back {
color:seagreen;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
-webkit-transform:rotateY(180deg) translateZ(25vh);
transform:rotateY(180deg) translateZ(25vh);
}
.cube .cube__top {
color:mediumseagreen;
-webkit-transform:rotateX(90deg) translateZ(25vh);
transform:rotateX(90deg) translateZ(25vh);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.cube .cube__bottom {
color:dodgerblue;
-webkit-transform:rotateX(270deg) translateZ(25vh);
transform:rotateX(270deg) translateZ(25vh);
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
@-webkit-keyframes rotator {
0% {
-webkit-transform:rotateX(0deg) rotateY(0deg);
transform:rotateX(0deg) rotateY(0deg);
}
100% {
-webkit-transform:rotateX(360deg) rotateY(360deg);
transform:rotateX(360deg) rotateY(360deg);
}
}@keyframes rotator {
0% {
-webkit-transform:rotateX(0deg) rotateY(0deg);
transform:rotateX(0deg) rotateY(0deg);
}
100% {
-webkit-transform:rotateX(360deg) rotateY(360deg);
transform:rotateX(360deg) rotateY(360deg);
}
}超绚丽CSS3多色彩发光立方体旋转动画DEMO演示??本效果非原创,
以css3写的代码,可以直接复制使用,傻瓜式复制+粘贴,